1

我想删除带有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>
4

2 回答 2

2

提供的 HTML 有一些小的验证错误，我在下面进行了更正。这些是<thead>不包含您的整个表格，并且绝对不应该存在于<tbody>. id上也有重复<table>。请参阅文档以了解有效的表格元素顺序。

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

更新后的 JavaScript 首先找到 rowIndex，就像您已经拥有的一样，但现在会中断，然后使用此索引作为起始位置向后迭代删除 4 行。

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

请参阅下面的演示或代码。

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> <!-- new entry #1 -->
      <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> <!-- new entry #2-->
      <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  
      }
    }
  }
}
于 2013-03-18T21:50:08.253 回答
1

您的问题是您删除了一行，但由于您rowspan=3的行由 3 行表示。因此，您必须删除与 rowspan 值一样多的行（第四个为 +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--;               
  }             
 }
}
于 2013-03-18T21:48:24.860 回答