Question

我有一个相当大的表，我动态删除了一些行。它有效，但速度很慢。现在需要约。在IE8和Firefox上删除50行1.5秒（浏览器几乎没有差异）。

我知道DOM操作通常很慢，但必须有更快的方法来实现这一点。

现在，我正在使用这种语法：

$("#myTable tr").slice(250, 300).remove();

slice()方法中的偏移量可能会有所不同。我使用slice()，因为在jQuerys帮助和其他方法中建议执行相同的操作 - 例如find()或eq() - 其中不会更快。我读过在删除之前做empty()，但那更慢。

Answer 1

考虑使用实际的javascript，以防jQuery触发渲染刷新：http://jsfiddle.net/MbXX5/

var removeRows = function(ofTable,from,to) {
    for(var row=to; row>=from; --row) {
        ofTable.deleteRow(row);
    }
};

正如你在jsfiddle中看到的，这是即时的。请注意，我正在反向遍历数组，因此行号仍然正确。根据DOM代码和浏览器使用的JIT策略，这有可能提高性能。

[编辑：带有颜色编码单元格的新jsfiddle使得哪些行已经消失非常明显]

Answer 2

问题是，对于.remove（）的每一行，浏览器都会重绘表格。为了加快速度，请从DOM中删除表格，取出线条并将表格放回原位。

$table = $("#myTable").clone(true,true);//First true to keep events, second true to deepcopy childs too. Remove it if you do not need it to make it faster.
$table.find("tr").slice(250,300);remove();
$("#myTable").replaceWith($table);

Answer 3

您可以使用过滤器，但我认为它不会更快

$("#myTable tr").filter(function(index){
     return index > 250 && index < 300;
).remove();

Answer 4

问题是浏览器尝试在每次删除行时更新DOM的屏幕视图。

您可以通过

之一来完成

从文档中删除表，删除所有行和之后插回来
克隆表，删除克隆上的元素，将表替换为克隆
或者如果剩余的行数小于删除的行数，您可以创建一个新表，插入其中的所有行并用新的表替换现有的表

主要思想是在执行删除时不将表附加到DOM，这样只有在删除所有行后才会更新视图。

Answer 5

是否可以为每行添加ID？然后直接按ID选择行并删除行？像这样：

var el = document.GetElementById("RowID_1");
document.removeChild(el);

jQuery在Javascript之上。我想直接使用javascript会更快。

编辑：当然你可以创建一个这样的循环：

for(i=250;i<=300;i++)
{
    var el = document.GetElementById("RowID_" + i);
    document.removeChild(el);  
}

编辑2：编辑时隐藏表格，以便每次删除后浏览器都不会更新？ ;）

Answer 6

试试这个。我希望它能帮助你

$("#myTable tr").slice(250, 300).html('');

从HTML表中删除行

6 个答案: