Czy istnieje szybki sposób na .remove wiersze tabeli z jQuery

Question

Mam tabelę z 50 nieparzystych wierszy z 11 kolumn. Każdy wiersz ma unikalny id składający się z id="row_<clientid>_rownumber". Nie ma wyboru w drugiej kolumnie z id="group_<clientid>_<petid>_rownumber"

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

gdy użytkownik kliknie pole wyboru Chcę usunąć wszystkie wiersze z wyjątkiem tych, które należą do wybranego klienta. Mam kod, który działa następująco:

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(); 

Problemem jest to trwa tak długo, że w IE otrzymuję „skrypt trwa zbyt długo” ostrzeżenie.

Czy istnieje szybsza metoda usuwania wielu wierszy?

BTW: To trwa 4,4 sekundy przy użyciu jQuery 1.4.3 i 1.3 sekund z jQuery 1.4.2

problem rozwiązany dzięki dla wszystkich. Ostatnia wskazówka podana przez @VisusZhao. Jest to końcowy fragment pracy:

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

Dziękuję wszystko

Answer 1

można najpierw zapisać wiersz dla klienta,

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

następnie opróżnić tabelę

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

następnie wstawić wiersz z powrotem

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

ten nie podejmie żadnych pętli, więc jego stały czas

Answer 2

Przede wszystkim dać tabela id.

<table id="departures"> 

Store wszystkich wymaganych wierszy w obiekcie jQuery, i tylko te wewnątrz #departures.

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

ten sposób jQuery nie będzie musiał przechodzić DOM za każdym razem wykonać funkcję, ponieważ to będzie przechowywany wewnątrz obiektu.

Następnie użyj kodu jak zwykle

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

zastępując ostatnią linię z tego

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

Answer 3

Myślę, że można spróbować użyć .filter zamiast, jak to:

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

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

A może, g ive wiersze, które należy do każdego klienta klasę:

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

Żadna z nich są gwarantowana być szybciej, w przeciwieństwie Marko's answer powyżej, ale są różne sposoby dokonywania tej pracy, i może być szybsze dla IE.

Answer 4

Zdecydowanie id twoja tabela i użyj jej jako kontekstu jQuery. Przechowuj również obiekt tabeli jQuery - choć prawdopodobnie nie zobaczysz zbyt dużej poprawy. Mogę spróbować zastosować klasę do każdego z twoich wierszy. Na przykład każdemu wierszowi należy podać klasę klienta, do której należą. To powinno załatwić sprawę:

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

Nie ma gwarancji, że będzie to szybsze, ale warto spróbować.

Answer 5

chciałbym zacząć dodając identyfikator do stołu:

<table id="alldepartures"> 

Następnie dla każdego wiersza zachować id jeśli jest to potrzebne, ale również dodać klasę CSS w formacie „client_ {id}”:

<tr class="client_123"> 

Jest to ok, ponieważ możesz mieć kilka wierszy z tą samą klasą.

Następnie w kodzie:

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

myślę inny kod może cierpieć zwłaszcza w IE z próbując zrobić dopasowania na podstawie identyfikatora jak jQuery ma zrobić dodatkowej pracy w IE przezwyciężyć wadliwy getElementById (id) wdrożenie.