在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);
   }
}

然而，它只會刪除其中的一半。 任何人都能看到導致這種奇怪行為的原因嗎？

Answer 1

因為當你刪除第一行時，第二行將成為第一行，它是動態的。

你可以這樣做：

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

Answer 2

考慮一下：

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

你基本上是在你所站立的地方挖一個洞，所以當你深入挖掘時，你會自然地沉入更深層次並且永遠不會看到任何進展......直到你在表格中刪除了用完的行。

Answer 3

如果刪除第一行，則第二行將成為新的第一行。

我更喜歡這樣做：

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

Answer 4

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);
}

Answer 5

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);
    }
}

Answer 6

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

Answer 7

你可以去：

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

Answer 8

如果您在代碼中使用JQuery，那么刪除行的最簡單方法是使用以下代碼：

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