按类名删除表行 - Javascript

我已经浏览了这么多关于这段简单代码的论坛帖子。并尝试了许多变化和方法，没有任何工作。按类名删除表行 - Javascript

我有一个基于数据库查询构建表的脚本。我将其限制为10个结果，并提供前进和后退按钮以转到数据库的其他结果。当你按下下一个按钮时，我需要它删除所有当前的表格行，以便用查询的新结果重新创建它们。我正在使用下面的代码来删除行;

if (document.getElementsByClassName('shiftTrRow')) { 
    table = document.getElementById('resultsTable') 
    deleteRow = document.getElementsByClassName('shiftTrRow'); 
    table.removeChild(deleteRow);  
}

我使用的情况下，如果要检查是否有任何要删除的行，我添加了一个警报，以测试是否有发现行和工作原理。

当我跑我收到就行了以下错误代码：

table.removeChild(deleteRow) 

Uncaught Error: NOT_FOUND_ERR: DOM Exception 8

我抬头错误代码，并解释说，元素不能被发现，但是这不能成为因为这个代码只会在元素被找到时执行。如果有人知道我做错了什么或更好的方式来做到这一点，我会非常感激。

来源

2012-08-05 Mitch

deleteRow = document.getElementsByClassName（'shiftTrRow'）[0]; ？ – 2012-08-05 15:50:17

刚刚尝试过，仍然收到相同的错误。究竟是什么[0]？ – Mitch 2012-08-05 15:52:10

8分钟，没有人提出jQuery？哇！ – Niko 2012-08-05 15:54:57

document.getElementsByClassName('shiftTrRow') 
       ^

返回NodeList，即元素数组。您需要循环播放它们并自行移除它们（但请注意，集合是实时的，在删除元素时会缩小）。

此外，getElementsByClassName可能会返回根本没有该表的行的元素，从而导致您收到的NOT FOUND异常。

然而，从表中删除行最简单的方法是其deleteRow method：

var table = document.getElementById('resultsTable'); 
while (table.rows.length > 0) 
    table.deleteRow(0);

来源

2012-08-05 15:52:31 Bergi

有趣的是，我已经硬编码了标题行，我猜测会是0行。所以我想我会需要改变0到1，它会产生预期的效果？ – Mitch 2012-08-05 16:03:33

是的，确切地说。我只是想修改答案，你可以通过使用比0更高的数字来保留第一行:-) – Bergi 2012-08-05 16:08:06

好吧我试过了，它删除了除标题以外的所有行，这是完美的解决方案，谢谢！我的代码的下一部分现在不起作用，但是我会处理它，看看我能否修复它。再次感谢！ – Mitch 2012-08-05 16:13:42

document.getElementsByClassName返回元件的阵列。 table.removeChild需要一个DOM元素，而不是数组，它的参数。

来源

2012-08-05 15:52:56

啊，我明白了，所以即使使用这种方法，我也无法删除所有行而不使用循环？仍然添加[0]没有解决它，所以在某处仍然存在问题。 – Mitch 2012-08-05 15:58:07

document.getElementsByClassName将返回一个NodeList，而不是一个单一的节点。您需要从该列表中选择一个节点，例如document.getElementsByClassName('shiftTrRow')[0]。

还要确保节点实际上是给定表的子节点。以下代码更安全一些：

if (document.getElementsByClassName('shiftTrRow')) 
{  
    deleteRow = document.getElementsByClassName('shiftTrRow')[0]; 

    if(deleteRow.parentNode) 
     deleteRow.parentNode.removeChild(deleteRow); 
}

来源

2012-08-05 15:53:51 Zeta

按类名删除表行 - Javascript

回答

相关问题