jquery - 从一个非常大的表中删除所有行的最快方法

Posted 2023-05-09

【中文标题】jquery - 从一个非常大的表中删除所有行的最快方法

【英文标题】：jquery - fastest way to remove all rows from a very large table

【发布时间】：2010-10-17 21:51:19

【问题描述】：

我认为这可能是删除一个非常大的表（3000 行）内容的快速方法：

$jq("tbody", myTable).remove();

但在 Firefox 中完成大约需要 5 秒钟。我在做一些愚蠢的事情吗（除了尝试将 3000 行加载到浏览器中）？有更快的方法吗？

【参考方案1】：

$("#your-table-id").empty();

这和你得到的一样快。

【讨论】：

嗯。令人沮丧。我认为删除会比插入快得多。有点让我想做一些非常丑陋的事情，比如隐藏表格并在我想要更新时创建一个新表格。

是的，嗯... html 不是为了在一个页面中显示 3k 行而创建的 :) 你想不出任何分页解决方案吗？这样会快很多。当然它需要更多的工作，但它会提供更丰富的用户体验。

这个不错。问题是这也会删除表头。

删除标题 :(

这将删除表格中的所有内容，包括标题。我假设@morgancodes 想要删除内容，也就是行，而不是标题。对于以后发现此问题的人，解决方案将是$('#mytable tbody').empty();。这确保只有 tbody 被清空。

【参考方案2】：

最好避免任何类型的循环，只需像这样直接删除所有元素：

$("#mytable > tbody").html("");

【讨论】：

html("") 内部调用empty()

对我来说很好的解决方案，因为它不会删除表格的标题。谢谢！

@Daria 充分利用选择器，这将使您的标题保持原位：$('table tbody').empty();

使用 ("#mytable > tbody") 和 ("#mytable tbody") 有什么区别。

如果您在表格的一行中有一个嵌套表格，它也会删除那些 tbody 标记。如果你只有一张桌子，应该不会有太大的不同。

【参考方案3】：

$("#myTable > tbody").empty();

它不会触及标题。

【参考方案4】：

使用 detach 比这里的任何其他答案都快：

$('#mytable').find('tbody').detach();

不要忘记将 tbody 元素放回表格中，因为 detach 删除了它：

$('#mytable').append($('<tbody>'));  

还要注意，当说话效率$(target).find(child) 语法比$(target > child) 快。为什么？ Sizzle!

清空 3,161 个表行所用的时间

使用 Detach() 方法（如我上面的示例所示）：

火狐：0.027s 铬：0.027 秒 边缘：1.73s IE11：4.02s

使用 empty() 方法：

火狐：0.055s 铬：0.052 秒 边缘：137.99s（还不如被冻结） IE11：冻结且永不返回

【讨论】：

与empty() 相比，detach() 将保留与已删除元素相关联的所有 jQuery 数据。

【参考方案5】：

我可以在这里看到两个问题：

jQuery 的 empty() 和 remove() 方法实际上做了很多工作。请参阅 John Resig 的 javascript Function Call Profiling 了解原因。

1234563这些电话的规模。我有一个非常复杂的表，有 1500 行，速度很慢，更改为基于 AJAX 的新表使相同的数据看起来相当快。

【讨论】：

感谢 artlung。实际上做一些类似的事情，一次从服务器获取所有数据，但只在需要时绘制表格行。

听起来不错。我想知道是否担心浏览器中表格中的行数总是一个问题，或者如果大多数计算机的内存增加，这将不是一个问题。

内存不是我加载的数据量的问题。瓶颈是 DOM 操作。

我想我们说的是同一件事。加载的数据越多，加载的 DOM 节点就越多，对我来说，这些与所需的内存有关。无论如何，我希望您的情况有所改善。

【参考方案6】：

这对我有用：

1-为每一行添加类“removeRow”

2-在jQuery中

$(".removeRow").remove();

【参考方案7】：

如果你只想快速删除..你可以像下面这样..

$( "#tableId tbody tr" ).each( function()
  this.parentNode.removeChild( this ); 
);

但是，表格中可以有一些事件绑定的元素，

在这种情况下，

以上代码并不能防止 IE 中的内存泄漏... T-T 和 FF 不快...

对不起……

【参考方案8】：

你可以试试这个……

var myTable= document.getElementById("myTable");
if(myTable== null)
    return;
var oTBody = myTable.getElementsByTagName("TBODY")[0];
if(oTBody== null)
    return;
try

    oTBody.innerHTML = "";

catch(e)

    for(var i=0, j=myTable.rows.length; i<j; i++)
        myTable.deleteRow(0);