Question

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

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

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

Answer 1

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

这和你一样快。

Answer 2

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

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

Answer 3

使用分离速度比这里的其他任何答案都快：

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

别忘了将tbody元素放回表中，因为detach删除了它：

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

还要注意，在提高效率时，$(target).find(child)语法比$(target > child)更快。为什么？ Sizzle!

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

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

Firefox：0.027秒
Chrome：0.027秒
边缘：1.73秒
IE11：4.02秒

使用empty（）方法：

Firefox：0.055秒
Chrome：0.052秒
边缘：137.99秒（可能会冻结）
IE11：冻结，永不返回

Answer 4

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

jQuery的empty（）和remove（）方法实际上做了很多工作。有关原因，请参阅John Resig的JavaScript Function Call Profiling。
另一件事是，对于大量的表格数据，您可能会考虑使用数据网格库（例如优秀的DataTables）从服务器动态加载数据，从而增加网络调用的数量，但减少了这些电话的大小。我有一个非常复杂的表，有1500行，速度很慢，改为新的基于AJAX的表，使得相同的数据看起来相当快。

Answer 5

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

它不会碰到标题。

Answer 6

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

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

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

在那种情况下，

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

抱歉....

Answer 7

这对我有用：

1-为每行“removeRow”添加课程

2-在jQuery中

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

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

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

8 个答案: