从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（），但是甚至更慢。

解决方案

考虑使用实际的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策略。

I have a rather big table where I dynamically remove some rows. It works, but it is very slow. Right now it takes approx. 1.5 seconds to remove 50 rows on IE8 and Firefox (almost no difference between the browsers).

I know that DOM manipulation is slow in general, but there must be a faster way to do this.

Right now, I'm using this syntax:

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

The offsets in the slice() method may vary. I use slice() since this was recommended in jQuerys help and other methods to perform the same thing - like find() or eq() - where not faster. I read about doing an empty() before the removal, but that was even slower.

解决方案

Consider using the actual javascript, in case jQuery is triggering render refreshes: http://jsfiddle.net/MbXX5/

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

As you can see in the jsfiddle, this is instant. Note that I'm traversing the array in reverse, so that the row numbers remain correct. There is a chance this improves the performance, depending on the DOM code and the JIT strategies the browser uses.

[Edit: new jsfiddle with colour-coded cells to make it really obvious which rows have gone]

这篇关于从HTML表中删除行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！