Remove checked rows in a table with a single click

Question

Remove checked rows in a table with a single click

I have created a table with a list and checkboxes next to each element. There is also a Delete button that I want to connect to the delete operation.

Here is the code for the Delete button:

<tr id="deleteproject" >
                        <td width="180" align="center" background="ButtonBackground.png"
onclick = "deleteRow('plist')">
                            <style="text-decoration:none; display:block; width:100%; 

height:100%">
                                <font size="0.5px"><br/></font>
                                <font id="DeleteProject" face="verdana" color="white">
DELETE</font>
                            </a>
                        </td>
</tr>

The table:

<table ID="plist" border="0" cellpadding="0" cellspacing="0" datasrc="#clicklist"
                        style="WIDTH: 380px">
                        <tr>
                            <td id="projline" width="100%" align="left" valign="middle"
 style="margin-left: 16px;">
                                <input type="checkbox" name="AAA"/>
                                <font size="3" face="Arial">
                                    <a id="proj" href="urn:a">
                                        <span datafld="Name" 

style="margin-left: 20px; line-height: 26px;"></span>
                                    </a>
                                </font>
                            </td>
                        </tr>
                    </table>

Function in JS for deleting rows:

function deleteRow(tableID) {
      try {
        var table = document.getElementById(tableID);
        var rowCount = table.rows.length;

        for(var i=0; i<rowCount; i++) {
            var row = table.rows[i];
            var chkbox = row.cells[0].childNodes[0];
            if(null != chkbox && true == chkbox.checked)
            {
                table.deleteRow(i);
                rowCount--;
                i--;
            }
        }
        }catch(e)
{
            alert(e);
        }
    }

When selecting a checkbox and clicking the delete button, an object error occurs which indicates an issue with the JS code.

javascript html css html-table

Answer 1

Answer №1

In order to proceed, you must first create a properly structured table. The current layout is considered invalid for both HTML5 and HTML4 standards. Specifically, the button element should be nested within a table structure. For more detailed information on this topic, please refer to this informative article.

Upon selecting a checkbox from a row and attempting to delete it using the designated button, an object error is encountered. This typically indicates that there is a null reference or an issue with understanding the JavaScript code.

If you are unsure where to begin troubleshooting, start by examining the JS code. It appears that you are attempting to target rows by referencing them as the TableRow Object? or ChildNode?. The ambiguous error message suggests that the DOM elements need to be referenced as objects. There are different methods to achieve this based on your specific situation:

The tr elements should be targeted based on their tag name: <tr>.
- var All_TR_Tags =
```
document.getElementsByTagName('tr');
```
- Now All_TR_Tags represents an array-like object

We encourage you to review the provided demo and ask questions to clarify any doubts. Generating a comprehensive list of issues and potential fixes would be a time-consuming task. Please note that the styling in the demo is incidental and mainly follows a default template for tables. While JavaScript plays a crucial role, don't overlook the importance of the table structure. The source code has been extensively annotated to aid in your understanding. Feel free to reach out if you require further assistance.

Snippet

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>delRows</title>
  <style>
    .x th {
      color: #FFF;
      background: #2C7EDB;
      padding: 10px;
      text-align: center;
      vertical-align: middle;
    }
    .x tr:nth-child(odd) {
      background-color: #333;
      color: #FFF;
    }
    .x tr:nth-child(even) {
      background-color: #D3E9FF;
      color: #333;
    }
    .x td {
      border-style: solid;
      border-width: 1px;
      border-color: #264D73;
      padding: 5px;
      text-align: left;
      vertical-align: top;
      position: relative;
    }
    .x thead th:first-child {
      border-top-left-radius: 6px;
    }
    .x thead th:last-child {
      border-top-right-radius: 6px;
    }
    .x tbody tr:last-child th:first-child {
      border-bottom-left-radius: 6px;
    }
    .x tbody tr:last-child td:last-child {
      border-bottom-right-radius: 6px;
    }
    th {
      width: 30%;
    }
    th:first-of-type {
      width: 10%;
    }
    table {
      width: 80%;
    }
  </style>
</head>

<body>
  <table id="T1" class="x">
    <thead>
      <tr>
        <th>
          <input id="btn1" type="button" value="DelRows" onclick="delRows('T1')" )/>
        </th>
        <th>A</th>
        <th>B</th>
        <th>C</th>
      </tr>
    </thead>
    <tbody>
      [Table content omitted for brevity]
    </tbody>
  </table>
  <script>
    [JavaScript function delRows() code omitted for brevity]
  </script>
</body>

</html>

Answer 2

In order to proceed, you must first create a properly structured table. The current layout is considered invalid for both HTML5 and HTML4 standards. Specifically, the button element should be nested within a table structure. For more detailed information on this topic, please refer to this informative article.

Upon selecting a checkbox from a row and attempting to delete it using the designated button, an object error is encountered. This typically indicates that there is a null reference or an issue with understanding the JavaScript code.

If you are unsure where to begin troubleshooting, start by examining the JS code. It appears that you are attempting to target rows by referencing them as the TableRow Object? or ChildNode?. The ambiguous error message suggests that the DOM elements need to be referenced as objects. There are different methods to achieve this based on your specific situation:

The tr elements should be targeted based on their tag name: <tr>.
- var All_TR_Tags =
```
document.getElementsByTagName('tr');
```
- Now All_TR_Tags represents an array-like object

We encourage you to review the provided demo and ask questions to clarify any doubts. Generating a comprehensive list of issues and potential fixes would be a time-consuming task. Please note that the styling in the demo is incidental and mainly follows a default template for tables. While JavaScript plays a crucial role, don't overlook the importance of the table structure. The source code has been extensively annotated to aid in your understanding. Feel free to reach out if you require further assistance.

Snippet

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>delRows</title>
  <style>
    .x th {
      color: #FFF;
      background: #2C7EDB;
      padding: 10px;
      text-align: center;
      vertical-align: middle;
    }
    .x tr:nth-child(odd) {
      background-color: #333;
      color: #FFF;
    }
    .x tr:nth-child(even) {
      background-color: #D3E9FF;
      color: #333;
    }
    .x td {
      border-style: solid;
      border-width: 1px;
      border-color: #264D73;
      padding: 5px;
      text-align: left;
      vertical-align: top;
      position: relative;
    }
    .x thead th:first-child {
      border-top-left-radius: 6px;
    }
    .x thead th:last-child {
      border-top-right-radius: 6px;
    }
    .x tbody tr:last-child th:first-child {
      border-bottom-left-radius: 6px;
    }
    .x tbody tr:last-child td:last-child {
      border-bottom-right-radius: 6px;
    }
    th {
      width: 30%;
    }
    th:first-of-type {
      width: 10%;
    }
    table {
      width: 80%;
    }
  </style>
</head>

<body>
  <table id="T1" class="x">
    <thead>
      <tr>
        <th>
          <input id="btn1" type="button" value="DelRows" onclick="delRows('T1')" )/>
        </th>
        <th>A</th>
        <th>B</th>
        <th>C</th>
      </tr>
    </thead>
    <tbody>
      [Table content omitted for brevity]
    </tbody>
  </table>
  <script>
    [JavaScript function delRows() code omitted for brevity]
  </script>
</body>

</html>

Remove checked rows in a table with a single click

Answer №1

Similar questions

core.js encountered an issue at line 6210: TypeError - The function this.service.addDepartment does not exist

jQuery: Remove the class if it exists, and then assign it to a different element. The power of jQuery

Why does xpath insist on choosing spaces instead of actual elements?

Double the Power of jQuery Live Search with Two Implementations on a Single Website

What criteria should I use to determine if a post has been favorited by a user using Mongoose?

The dropdown login form is malfunctioning on my Wordpress website

Tips for extracting the chosen text during a 'change' event

The command `grunt.option('force', true) isn't functioning properly

Delay in loading Jquery accordion due to value binding

Retrieve information from the selected row within a table by pressing the Enter key

Having issues sorting the ranking table numerically in a Javascript/jQuery/JSON/localStorage game

AngularJS - Textarea not resetting content on ng-click event

Streamlining the process of formatting URLs?

Stop HTML audio playback upon clicking on a specific element

Question about React.js: What is the best way to add multiple classes to a component by using a ternary operator?

Material UI - Utilizing multiple CSS classes within a unified global theme

Leveraging MongoDB imported documents within DerbyJS

Three.js interpolation surface solution

Sass compilation with source mapping

Avoid showing duplicate values in the optgroup selection