使用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>