0

我有一个相当大的表，我动态删除一些行。它可以工作，但速度很慢。现在大约需要。在 IE8 和 Firefox 上删除 50 行需要 1.5 秒（浏览器之间几乎没有区别）。

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

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

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

该slice()方法中的偏移量可能会有所不同。我之所以使用slice()它，是因为在 jQuerys 帮助和其他方法中建议使用它来执行相同的事情 - 比如find()或eq()- 在不更快的地方。我读过关于empty()在移除之前做一个，但这更慢。

4

6 回答 6

4

考虑使用实际的 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 使哪些行已经消失]

于 2012-10-11T11:09:33.857 回答
3

问题是对于您 .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);
于 2012-10-11T10:48:58.537 回答
1

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

$("#myTable tr").filter(function(index){
     return index > 250 && index < 300;
).remove();
于 2012-10-11T10:45:26.837 回答
0

尝试这个 。我希望它会帮助你

$("#myTable tr").slice(250, 300).html('');
于 2012-10-11T11:05:33.020 回答
0

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

您可以通过以下方式之一完成

  • 从文档中删除表格，删除所有行，然后将其重新插入
  • 克隆表，删除克隆上的元素，用克隆替换表
  • 或者如果剩余的行数少于删除的行数，您可以创建一个新表，将所有行插入其中并用新表替换现有表

主要思想是当您进行删除时，表格不会附加到 DOM，这样它只会在删除所有行后更新视图。

于 2012-10-11T10:47:38.803 回答
0

是否可以为每一行添加一个 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：在编辑时隐藏表格，以便浏览器在每次删除后不会更新？;)

于 2012-10-11T10:48:47.310 回答