html dom table从表格删除一行,从HTML表中删除行(Remove rows from an HTML table)

我有一个相当大的表在哪里动态删除一些行。 它的工作原理，但它是非常缓慢的。 现在，它大约需要。 1.5秒上IE8和Firefox(浏览器之间几乎没有差异)除去50行。

我知道，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:

问题是，为您卸下摆臂每一行()，该表是由浏览器重新绘制。 为了使它更快，从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更快。

编辑：Ofcourse，你可以创建这样一个循环：

for(i=250;i<=300;i++)

{

var el = document.GetElementById("RowID_" + i);

document.removeChild(el);

}

编辑2：隐藏的表，同时编辑这样浏览器就不会每次删除后更新？ ;)

Answer 6:

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

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

文章来源: Remove rows from an HTML table