使用javascript中的复选框删除HTML表格中的多行

Question

我无法删除所选的行。 我想删除选中复选框的行。 但是我无法访问表行并检查是否选中了复选框。 我该怎么办？

码：

 <div class="container"> <div class="tab tab-1"> <table id="table" border="1"> <tr> <th></th> <th>First Name</th> <th>Last Name</th> <th>Age</th> <th>edit</th> </tr> <tr> <td><input type="checkbox" id="select"></td> <td>A1</td> <td>B1</td> <td>10</td> <td><input type="button" value="edit" id="edit"></td> </tr> <tr> <td><input type="checkbox" id="select"></td> <td>A3</td> <td>B3</td> <td>30</td> <td><input type="button" value="edit" id="edit"></td> </tr> <tr> <td><input type="checkbox" id="select" class="select"></td> <td>A2</td> <td>B2</td> <td>20</td> <td><input type="button" value="edit" id="edit"></td> </tr> </table> </div> <button onclick="deleteRow();">Remove</button> <script> function deleteRow() { var table = document.getElementById("table"); var rowCount = table.rows.length; console.log("rowcount : " + rowCount); for (var i = 1; i < rowCount; i++) { var c = table.rows[i].cells[0].childNodes; console.log(c); if (c.checked == 1) { console.log("i :" + i); table.deleteRow(i); } } }. </script> 

Answer 1

使用querySelectorAll()和:checked以选中所有选中的复选框。

parentNode.parentNode是获取父tr节点

 function deleteRow() { document.querySelectorAll('#table .select:checked').forEach(e => { e.parentNode.parentNode.remove() }); } 

 <div class="container"> <div class="tab tab-1"> <table id="table" border="1"> <tr> <th></th> <th>First Name</th> <th>Last Name</th> <th>Age</th> <th>edit</th> </tr> <tr> <td><input type="checkbox" class="select"></td> <td>A1</td> <td>B1</td> <td>10</td> <td><input type="button" value="edit" id="edit"></td> </tr> <tr> <td><input type="checkbox" class="select"></td> <td>A3</td> <td>B3</td> <td>30</td> <td><input type="button" value="edit" id="edit"></td> </tr> <tr> <td><input type="checkbox" class="select"></td> <td>A2</td> <td>B2</td> <td>20</td> <td><input type="button" value="edit" id="edit"></td> </tr> </table> </div> </div> <button onclick="deleteRow();">Remove</button> 

注意：避免使用重复的id

Answer 2

代码的问题在于删除行后，所有后续行的索引会立即减1，因为HTMLTableElement.prototype.rows返回实时 HTMLCollection 。

这不仅导致您的循环执行过于频繁（因为您缓存了table.rows.length ），而且还导致后续索引不再匹配。

我建议使用更易读for...of循环，这只会稍微复杂一些，因为表似乎不允许使用table.removeChild(row) ：

 function deleteRow() { const table = document.getElementById("table"); for (const [index, row] of [...table.rows].entries()) { if (row.querySelector('input:checked')) { table.deleteRow(index); } } } 

 <table id="table" border="1"> <tr> <th></th> <th>First Name</th> <th>Last Name</th> <th>Age</th> <th>edit</th> </tr> <tr> <td><input type="checkbox" class="select"></td> <td>A1</td> <td>B1</td> <td>10</td> <td><input type="button" value="edit" class="edit"></td> </tr> <tr> <td><input type="checkbox" class="select"></td> <td>A3</td> <td>B3</td> <td>30</td> <td><input type="button" value="edit" class="edit"></td> </tr> <tr> <td><input type="checkbox" class="select"></td> <td>A2</td> <td>B2</td> <td>20</td> <td><input type="button" value="edit" class="edit"></td> </tr> </table> <button onclick="deleteRow();">Remove</button> 

Answer 3

删除行的方法是错误的，因为你使用了一个具有预缓存长度的for循环，但是当一行（比如i ）被删除时，行i+1变为i并且长度发生变化。

解决此问题的正确方法是使用while循环而不缓存行数并仅在不删除行时递增索引。

例：

 function deleteRow () { /* Cache the table. */ var table = document.getElementById("table"); /* Create the index used in the loop. */ var index = 1; /* Repeat as long as the index is less than the number of rows. */ while (index < table.rows.length) { /* Get the input of the cell. */ var input = table.rows[index].cells[0].children[0]; /* Check whether the input exists and is checked. */ if (input && input.checked) { /* Delete the row at the current index. */ table.deleteRow(index); } else { /* Increment the index. */ index++; } } } 

 <div class="container"> <div class="tab tab-1"> <table id="table" border="1"> <tr> <th></th> <th>First Name</th> <th>Last Name</th> <th>Age</th> <th>edit</th> </tr> <tr> <td><input type="checkbox" id="select"></td> <td>A1</td> <td>B1</td> <td>10</td> <td><input type="button" value="edit" id="edit"></td> </tr> <tr> <td><input type="checkbox" id="select"></td> <td>A3</td> <td>B3</td> <td>30</td> <td><input type="button" value="edit" id="edit"></td> </tr> <tr> <td><input type="checkbox" id="select" class="select"></td> <td>A2</td> <td>B2</td> <td>20</td> <td><input type="button" value="edit" id="edit"></td> </tr> </table> </div> <button onclick="deleteRow();">Remove</button>