從HTML表中刪除行

我有一個相當大的表，我動態地刪除了一些行。它可以工作，但速度很慢。現在它大約需要。 1.5秒，在IE8和Firefox上刪除50行（瀏覽器幾乎沒有區別）。從HTML表中刪除行

我知道DOM操作通常很慢，但必須有更快的方法來完成此操作。

現在，我使用這個語法：

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

在slice()方法的偏移量可能會有所不同。我使用slice()，因爲這是jQuerys的幫助和其他方法推薦執行相同的事情 - 如find()或eq() - 在哪裏不是更快。我在閱讀關於刪除之前做了empty()的閱讀，但是速度更慢。

來源

2012-10-11 Jan Petzold

考慮使用實際的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-11 11:09:33

這在IE中更快（行刪除只需要160毫秒），但在Firefox（2.5秒）中慢得多。這很奇怪:)我實際上想避免瀏覽器檢測，但差異是顯着的。儘管如此，在Firefox中快速刪除行將會很好。 –

在我的Firefox（13.0）中，它是即時的，就像在Chrome中一樣。不知道這個版本的Firefox是怎麼回事...... –

我使用了Firefox 15.0.1，並且再次複製它，沒有任何區別。 –

您可以使用過濾器，但我不認爲它會更快

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

來源

2012-10-11 10:45:26 Anoop

雖然這確實是有點快於IE（<100毫秒）有在Firefox沒有區別。 –

的問題是瀏覽器嘗試更新的每一行去除DOM的屏幕視圖。

您可以通過

一個做刪除表，從文檔，刪除所有行和後插回
克隆的桌子上，克隆刪除元素，更換表克隆
或者如果剩餘行的數量小於那些刪除，你可以創建一個新表，在插入所有的行，並與新的

0123替換現有的表

主要思想是當您執行刪除操作時，不會將表格附加到DOM，這樣一旦刪除了所有行，它就只會更新視圖。

來源

2012-10-11 10:47:38 xception

是否有可能爲每行添加一個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：隱藏表，同時編輯這樣瀏覽器就不會每次刪除後更新？ ;）

來源

2012-10-11 10:48:47

問題是，對於您.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-11 10:48:58 Salketer

這在Firefox中速度更快， 800毫秒。大！然而，IE瀏覽器的瀏覽速度要慢得多，行刪除花費了3.5秒。所以我想我會結合你的答案和@Phil H的答案。 –

如果你知道，在DOM插入時，表中將被取出的部分，將它們分組在tbodys中並移除tbody。這樣只有一個Manip。使用這個想法，如果你知道他們會被一羣人剔除，比如10，那麼每10個人中就有一個人是一個人？我用一個類似的東西來製作無限的滾動腳本，工作得很好。 – Salketer

我真的很喜歡這個想法。我的任務也差不多，一個（幾乎）無限的表，我根據滾動的位置動態地操縱行。通過刪除'tbody'而不是所有行，我可以將刪除時間減少到220 ms（Firefox）和600 ms（IE）。這也是完全有效的HTML，並提高了可讀性（在我看來）。 –

試試這個。我希望它會幫助你

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

來源

2012-10-11 11:05:33 YogeshWaran

在IE中沒有區別。 Firefox實際上墜毀了。 –

從HTML表中刪除行

回答

相關問題