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

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元素放回到表中，因為分離刪除了它：

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

還要注意，當談論效率時， $(target).find(child)語法比$(target > child)更快。 為什么？ 嘶嘶！

經過時間清空3,161桌行

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

• Firefox：0.027s
• Chrome：0.027秒
• 邊緣：1.73秒
• IE11：4.02s

使用empty（）方法：

• Firefox：0.055秒
• Chrome：0.052秒
• 邊緣：137.99s（不妨凍結）
• IE11：凍結，永不回歸

Answer 4

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

它不會觸及標題。

Answer 5

我在這里可以看到兩個問題：

1. jQuery的empty（）和remove（）方法實際上做了很多工作。 請參閱John Resig的JavaScript函數調用概要文件了解原因。

2. 另一件事是，對於大量表格數據，您可能會考慮使用數據網格庫（例如優秀的DataTables）從服務器動態加載數據，增加網絡調用的數量，但減少這些調用的大小。 我有一個非常復雜的表，有1500行，速度很慢，改為新的基於AJAX的表，使得相同的數據看起來相當快。

Answer 6

如果你想快速刪除..你可以像下面這樣做..

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

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

在這種情況下，

以上代碼不能防止IE中的內存泄漏... TT並且在FF中不快...

抱歉....

Answer 7

這對我有用：

1-為每行“removeRow”添加類

在jQuery中的2-

$(".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);
}