¿Hay una manera rápida de. Eliminar filas de la tabla con jQuery

Question

Tengo una tabla de 50 filas impares con 11 columnas. Cada fila tiene un único id compuesto por id="row_<clientid>_rownumber". Hay una casilla de verificación en la segunda columna con id="group_<clientid>_<petid>_rownumber"

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

Cuando el usuario hace clic en una casilla de verificación Quiero eliminar todas las filas excepto que pertenecen a cualquier cliente seleccionado. Tengo el código que funciona de la siguiente manera:

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

El problema es que se necesita tanto tiempo que en el IE me sale el "guión está tomando demasiado tiempo" advertencia.

¿Hay un método más rápido para eliminar muchas filas?

Por cierto: Se necesita 4,4 segundos utilizando jQuery 1.4.3 y 1.3 segundos con jQuery 1.4.2

problema resuelto gracias a todos. Pista final proporcionada por @VisusZhao. Este fragmento es de trabajo final:

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

Gracias a todos

Answer 1

puede almacenar primero la fila para el cliente,

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

continuación, vaciar la tabla

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

luego insertar la fila de atrás

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

esto tomará ningún bucle, por lo que es el tiempo constante

Answer 2

En primer lugar, dar a la mesa de un id.

<table id="departures"> 

tienda todas las filas requeridas en un objeto jQuery, y sólo los que están dentro #departures.

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

De esta manera, jQuery no tendrá que recorrer el DOM cada vez que realice una función porque va a ser almacenado en el interior del objeto.

A continuación, utilice el código como de costumbre

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

Mientras que la sustitución de la última línea con esta

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

Answer 3

Creo que se puede tratar de usar .filter lugar, como este:

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

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

O tal vez, g ive las filas que pertenecen a cada cliente una clase:

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

Ninguno de estos son garantizado a ser más rápido, a diferencia de Marko's answer anteriormente, pero son diferentes maneras de hacer este trabajo, y puede ser más rápido para IE.

Answer 4

Indique definitivamente su tabla y utilícela como su contexto de jQuery. También almacene el objeto jQuery de la tabla también, aunque probablemente no verá mucha mejoría al respecto. Podría intentar aplicar una clase a cada una de tus filas. Por ejemplo, otorgue a cada fila una clase del cliente al que pertenecen. Entonces, esto debería ser el truco:

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

No hay garantía de que sea más rápido, pero podría valer la pena intentarlo.

Answer 5

Me gustaría empezar añadiendo un ID para la tabla:

<table id="alldepartures"> 

A continuación, para cada fila mantener el id si lo necesita, sino también añadir una clase CSS en el formato "Client_ {id}":

<tr class="client_123"> 

Esto está bien, porque puede tener varias filas con la misma clase.

Luego en el código:

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

creo que el otro código puede estar sufriendo especialmente en IE con el intento de hacer que emparejan basado en ID como jQuery tiene que hacer trabajo extra en IE para superar su getElemenById defectuoso (id) implementación.