javascript - JavaScriptでテーブル行を削除する

Question

JavaScript の関数に問題があり、その理由がわかりません。それは本当に簡単です。HTMLテーブルのすべての行を削除しようとしています。だから私は書いた：

function delete_gameboard(){
   var table = document.getElementById("gameboard");
   var rowCount = table.rows.length;
   for (var i = 0; i < rowCount; i++) {
      table.deleteRow(i);
   }
}

それでも、半分しか削除されません。この奇妙な動作の原因は誰にもわかりますか?

score 34 · Accepted Answer

最初の行を削除すると、2 番目の行が最初の行になるため、動的です。

あなたは次のようにすることができます：

while(table.rows.length > 0) {
  table.deleteRow(0);
}

score 5 · Accepted Answer

このことを考慮：

index 0:  row #1
index 1:  row #2
index 2:  row #3
index 3:  row #4
index 4:  row #5

インデックス #2 (行 #3) を削除すると、DOM エンジンがインデックスキーを調整し、次のようになります。

index 0:  row #1
index 1:  row #2
index 2:  row #4   <---hey! index #2 is still there
index 3:  row #5

基本的に、立っている場所に穴を掘っているので、深く掘り下げると、自然に深く沈み、進行状況がまったく見えなくなります...テーブルで削除する行がなくなるまで.

score 4 · Accepted Answer

function delete_gameboard(){
var table = document.getElementById("gameboard");
var rowCount = table.rows.length;
for (var i=rowcount-1; i >=0; i--) {
    table.deleteRow(i);
}
}

行を削除すると、行のインデックスが変更されます。逆ループを使用します。これは、条件を使用して行を削除する場合にも役立ちます。すべての行を削除する場合は、次を使用します

while(table.rows.length) {
  table.deleteRow(0);
}

score 3 · Accepted Answer

最初の行を削除すると、2 番目の行が新しい最初の行になります。

私はこれを行うことを好みます：

while(table.rows[0]) table.deleteRow(0);

score 2 · Accepted Answer

行はライブです。tableつまり、行 0 を削除すると、次の行が行 0 になり、常に行 0 が削除されます。

function delete_gameboard(){
    var table = document.getElementById("gameboard");
    var rowCount = table.rows.length;
    for (var i=0; i < rowCount; i++) {
        table.deleteRow(0);
    }
}

score 1 · Accepted Answer

あなたはただ行くことができます：

    document.getElementById("gameboard").innerHTML = "";

score 0 · Accepted Answer

function delRow()
  {
    var current = window.event.srcElement;
    //here we will delete the line
    while ( (current = current.parentElement)  && current.tagName !="TR");
    current.parentElement.removeChild(current);
  }

score -2 · Accepted Answer

コードで JQuery を使用している場合、行を削除する最も簡単な方法は次のコードを使用することです。

$('#myTable tbody').html('');

javascript - JavaScriptでテーブル行を削除する

8 に答える 8

Related

Reference