Question

我想删除带有rowspan的选定行和下面的额外行，总共4行，您可以看到每4行的行代表1个条目。下面的函数deleteSelectedRows（）无法正常工作;它只删除所选的一个。你能帮忙吗？

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<table  id="my_table" id="my_table" align="center" width="100%" border="1" cellpadding="0" cellspacing="0">
    <tbody>
    <thead>
      <tr>
        <th >No</th>
        <th >Location</th>
        <th >Time</th>
      </tr>
      <tr> <!-- new entry #1 -->
        <td rowspan="3"><input type="checkbox">1a<td>
        <td>1a</td>
      </tr>
      <tr>
        <td>2a</td>
        <td>2a</td>
      </tr>
      <tr>
        <td>3a</td>
        <td>3a</td>
      </tr>
      <tr >
        <td colSpan="3">4a</td>
      </tr>
      <tr> <!-- new entry #2-->
        <td rowspan="3"><input type="checkbox">1b<td>
        <td>1b</td>
      </tr>
      <tr>
        <td>2b</td>
        <td>2b</td>
      </tr>
      <tr>
        <td>3b</td>
        <td>3b</td>
      </tr>
      <tr >
        <td colSpan="3">4b</td>
      </tr>
     </thead></tbody>
    </table>
    <div><input type="button" value="Delete selected rows" onClick="deleteSelectedRows()"/></div>
</body>
</HTML>
   <SCRIPT language="javascript">
    function deleteSelectedRows() {    
     var table = document.getElementById('my_table'); //html table
     var rowCount = table.rows.length; //no. of rows in table          
     for(var i=0; i< rowCount; i++) { //loops for all row in table 

      var row = table.rows[i]; //return a particular row              
      var chkbox = row.cells[0].childNodes[0]; //get check box onject               
      if(null != chkbox && true == chkbox.checked) { //wheather check box is selected                   
       table.deleteRow(i); //delete the selected row   

       rowCount = rowCount-1; //decrease rowcount by 1                   
       i--;               
      }             
     }
    }
</script>

Answer 1

提供的HTML有一些小的验证错误，我已在下面更正。这些是<thead>不包含您的整个表格，并且在 <tbody>后绝对不应该存在。此外，id上还有一个重复的<table>。有关有效的表格元素顺序，请参阅documentation。

您遇到的问题是代码只删除了一行与复选框匹配的行。然后rowCount将减少1（从9减少到8），但删除行的逻辑仍然取决于找到的复选框，但是由于您刚刚删除了该行，因此再也不会这样！

~~更新后的JavaScript首先找到rowIndex，就像你已经拥有的那样，但现在突然出现，然后使用这个索引作为起始位置向后迭代删除4行。~~

编辑：更新后的JavaScript可以向后工作，避免所有递增和递减，现在可以在检查多个输入时起作用。抱歉，我错过了第一个答案可以检查多个盒子的可能性！

See demo或以下代码。

HTML （现在有效）

<table id="my_table" align="center" width="100%" border="1" cellpadding="0" cellspacing="0"> <thead> <tr> <th>No</th> <th>Location</th> <th>Time</th> </tr> </thead> <tbody> <tr>  <td rowspan="3"><input type="checkbox"/>1a</td> <td>1a</td> <td></td> </tr> <tr> <td>2a</td> <td>2a</td> </tr> <tr> <td>3a</td> <td>3a</td> </tr> <tr> <td colSpan="3">4a</td> </tr> <tr>  <td rowspan="3"><input type="checkbox"/>1b</td> <td>1b</td> <td></td> </tr> <tr> <td>2b</td> <td>2b</td> </tr> <tr> <td>3b</td> <td>3b</td> </tr> <tr> <td colSpan="3">4b</td> </tr> </tbody> </table> <div><input type="button" value="Delete selected rows" onClick="deleteSelectedRows()"/></div>

<强>的JavaScript

function deleteSelectedRows() { var table = document.getElementById('my_table'); //html table for (var rowIndex = table.rows.length - 1; rowIndex >= 0; rowIndex--) { //loops for all row in table var row = table.rows[rowIndex]; //return a particular row var chkbox = row.cells[0].childNodes[0]; //get check box object if (null != chkbox && true == chkbox.checked) { //wheather check box is selected // rowIndex = row with checkbox on for (var i = rowIndex + 3; i >= rowIndex; i--) { table.deleteRow(i); //delete the selected row } } } }

Answer 2

您的问题是您删除了一行，但由于您的rowspan=3，您的行由3行表示。因此，您必须删除与rowpan值一样多的行（第四行为+1）。像这样：

function deleteSelectedRows() {    
 var table = document.getElementById('my_table');
 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) {
   nbRows = row.cells[0].rowSpan + 1; // the number of row to delete
   for(var j=0; j<nbRows; j++) {       
    table.deleteRow(i); //delete the selected rows  
    rowCount--; 
   }
   i--;               
  }             
 }
}

使用rowspan删除多个选定的行+

2 个答案: