是否有一種快速的方式來刪除與jQuery的錶行

我有一個包含11列的50奇數行的表。每行有一個獨特的id，由id="row_<clientid>_rownumber"組成。有一個在第二列中的複選框與id="group_<clientid>_<petid>_rownumber"是否有一種快速的方式來刪除與jQuery的錶行

Redacted Screenshot http://www.forsythesit.com.au/res/img/slowrowremoval.jpg

當用戶點擊一個複選框，我想刪除狀態之外的任何屬於選定客戶端的所有行。我有一些代碼的工作原理如下：

var sClient = $(this).attr("id").substring(6); // trim off group_ 
sClient = sClient.substring(0,sClient.indexOf("_")); // trim off anything after clientid 
$("tr[id^=row_]").not("tr[id^=row_" + sClient + "]").remove();

問題是，它需要很長時間，在IE中，我得到了「腳本的時間過長」的警告。

是否有更快的方法來刪除多行？

順便說一句：它需要使用jQuery 1.4.3和1.3秒4.4秒與jQuery 1.4.2

問題就解決了由於所有。 @VisusZhao提供的最終提示。這是最後的工作片段：

var KeepRows = $("#bookingstable tbody tr[id^=row_" + sClient + "_]"); 
$("#bookingstable tbody").empty(); 
$("#bookingstable tbody").append(KeepRows);

謝謝大家

來源

2010-10-21 JJBaxter

你確定這是什麼原因導致延遲？似乎約50行，這不應該花很長時間。 – 2010-10-21 01:21:19

我懷疑這是獲取客戶端字符串的代碼很慢，但這可能會更清潔一點：'var sClient = $（this）.attr（「id」）。split（'_'）[1] ;'用下劃線分割字符串然後抓住中間位。 – scunliffe 2010-10-21 01:22:29

嘗試使用：not（）selector – bevacqua 2010-10-21 01:23:54

可以先存儲行客戶端，

var clientRow = $('#row_' + sClient);

然後清空表

$('#table_id tbody').empty();

然後插入該行回

$('#table_id tbody').append(clientRow);

這將不會形成環路，所以它的恆定時間

來源

2010-10-21 03:03:39

好@VisusZhao這個看起來不錯，在我的盒子外面。現在測試它。 – JJBaxter 2010-10-24 23:43:30

行被保存，表被清除，但'.append'沒有追加任何東西。不知道爲什麼。仍在調查。 – JJBaxter 2010-10-25 00:00:15

它在我的機器上工作，看到這個小提琴：http://jsfiddle.net/pZ89b/2/ – 2010-10-25 07:14:27

首先，把桌上的ID。

<table id="departures">

商店都在一個jQuery對象所需的行，只有那些內#departures。

var $departures = $("#departures"); 
var $rows = $("tr[id^=row_]", $departures); //

這樣，jQuery將不必在每次執行一個功能，因爲它會被存儲在物體內的時間來遍歷DOM。

然後用你的代碼像往常一樣

var sClient = $(this).attr("id").substring(6); // trim off group_ 
sClient = sClient.substring(0,sClient.indexOf("_")); // trim off _row

雖然這個

$rows.not("tr[id^=row_" + sClient + "]", $departures).remove();

來源

2010-10-21 01:29:47 Marko

感謝@marko，這讓我感覺很多，但對速度沒有影響。可能是因爲頁面的DOM由表格支配，只有幾個div封閉了頁面頂部的按鈕。 – JJBaxter 2010-10-21 03:32:52

更換的最後一行，我認爲你可以嘗試使用.filter代替，就像這樣：

var sClient = this.id.substring(6); // trim off group_ 

$("#table_id tr").filter(function(){ 
    return (this.id.indexOf('row') === 0 && this.id !== sClient); 
}).remove();

或者，也許，g香港專業教育學院屬於每個客戶機一類的行：

var sClient = this.id.substring(6); // trim off group_ 
$('#table tr.' + sClient).remove();

這些都不是保證要快，不像Marko's answer以上，但它們是不同的方法來進行此工作，並且可以是用於IE更快。

來源

2010-10-21 01:57:28

對不起@YiJiang，結果一樣。 – JJBaxter 2010-10-25 00:02:18

絕對id你的表，並使用它作爲你的jQuery上下文。同樣存儲表jQuery對象 - 雖然你可能不會看到太多的改進。我可能會嘗試對每一行應用一個類。例如，給每行一個他們所屬的客戶端的類。然後，這應該做的伎倆：

var tableElement = $("#table_id"); // only do this once on page load 
tableElement.find("tr:not(." + sClient + ")").hide();

不保證這會更快，但它可能是值得一試。

來源

2010-10-21 02:54:40

我會通過增加一個ID表開始：

<table id="alldepartures">

接下來，對於每一行保持id如果你需要它，而且在格式添加一個CSS類「client_（編號）」：

<tr class="client_123">

這是好的，因爲你可以有幾行同一類。

然後在你的代碼：

var sClient = $(this).attr("id").split('_')[1]; 
//remove all rows that don't have this class 
$('#alldepartures').find('tr[class!=client_' + sClient + ']').remove();

我覺得其他的代碼可以尤其是在IE瀏覽器，試圖匹配基於ID做，因爲jQuery有做在IE額外的工作來克服自己錯誤的getElementById（患id）實現。

來源

2010-10-21 11:00:42 scunliffe

是否有一種快速的方式來刪除與jQuery的錶行

回答

相關問題