Existe-t-il un moyen rapide de supprimer les lignes de table avec jQuery?

Question

J'ai une table de 50 lignes impaires avec 11 colonnes. Chaque rangée a un id composé de id="row_<clientid>_rownumber". Il y a une case à cocher dans la deuxième colonne avec id="group_<clientid>_<petid>_rownumber"

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

Lorsque l'utilisateur clique sur une case à cocher Je veux supprimer toutes les lignes, sauf celles qui appartiennent au client sélectionné. J'ai le code qui fonctionne comme suit:

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

Le problème est qu'il faut si longtemps que dans IE je reçois l'avertissement « script est trop long ».

Existe-t-il une méthode plus rapide pour supprimer plusieurs lignes?

BTW: Il faut 4,4 secondes en utilisant jQuery 1.4.3 et 1.3 secondes avec jQuery 1.4.2

Problème résolu grâce à tous. Dernier indice fourni par @VisusZhao. Ceci est extrait de travail final:

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

Merci à tous

Answer 1

vous pouvez d'abord enregistrer la ligne du client,

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

puis vider la table

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

puis insérez la ligne arrière

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

cela prendra pas de boucle, donc son heure constante

Answer 2

D'abord, donner la table un identifiant.

<table id="departures"> 

magasin toutes les lignes requises dans un objet jQuery, et que ceux qui s'y trouvaient #departures.

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

De cette façon, jQuery ne pas avoir à traverser le DOM chaque fois que vous effectuez une fonction car il sera stocké à l'intérieur de l'objet.

Ensuite, utilisez votre code comme d'habitude

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

Lors du remplacement de la dernière ligne avec ce

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

Answer 3

Je pense que vous pouvez essayer d'utiliser .filter à la place, comme ceci:

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

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

Ou peut-être, g ive les lignes qui appartiennent à chaque client une classe:

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

Aucun de ceux-ci sont garantis être plus rapide, contrairement Marko's answer ci-dessus, mais ils sont différents moyens de faire ce travail, et peut-être plus rapide pour IE.

Answer 4

Identifiez définitivement votre table et utilisez-la comme contexte jQuery. En outre, stockez également l'objet jQuery de la table, même si vous ne verrez probablement pas beaucoup d'améliorations par rapport à cela. Je pourrais essayer d'appliquer une classe à chacune de vos lignes. Par exemple, donnez à chaque rangée une classe du client auquel il appartient. Ensuite, cela devrait faire l'affaire:

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

Aucune garantie que ce soit plus rapide, mais cela vaut peut-être la peine d'essayer.

Answer 5

Je commencerais en ajoutant un ID à la table:

<table id="alldepartures"> 

Ensuite, pour chaque ligne garder le id si vous en avez besoin, mais aussi ajouter une classe CSS dans le format « Client_ {id} »:

<tr class="client_123"> 

Ceci est correct, car vous pouvez avoir plusieurs lignes avec la même classe.

Puis dans votre code:

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

Je pense que l'autre code peut souffrir en particulier dans IE en essayant de faire de la correspondance basée sur ID comme jQuery doit faire un travail supplémentaire dans IE pour surmonter leur défaut getElementById (id) implémentation.