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

然而，它只会删除其中的一半。谁能看到导致这种奇怪行为的原因？

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

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 4

如果删除第一行，则第二行将成为新的第一行。

我更喜欢这样做：

while(table.rows[0]) 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

你可以去：

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

Answer 7

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 8

如果您在代码中使用 JQuery，那么删除行的最简单方法是使用以下代码：

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