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>ます。テーブル要素の有効な順序については、ドキュメントを参照してください。

あなたが抱えていた問題は、コードがチェックボックスに一致する1行だけを削除したことです. その後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

問題は、1つの行を削除することですが、rowspan=3行が3つの行で表されているためです。したがって、rowspan値（4番目の場合は+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 に答える