jquery: la forma más rápida de eliminar todas las filas de una tabla muy grande


93

Pensé que esta podría ser una forma rápida de eliminar el contenido de una tabla muy grande (3000 filas):

$jq("tbody", myTable).remove();

Pero tarda unos cinco segundos en completarse en Firefox. ¿Estoy haciendo algo tonto (además de intentar cargar 3000 filas en un navegador)? ¿Hay una forma más rápida de hacerlo?

Respuestas:


213
$("#your-table-id").empty();

Eso es lo más rápido que obtienes.


Hmmm. Frustrante. Creo que eliminar sería mucho más rápido que insertar. Me dan ganas de hacer cosas realmente feas, como ocultar la tabla y crear una nueva cuando quiera actualizarla.
morgancodes

10
Sí, bueno ... HTML no fue creado para mostrar 3000 filas en una página :) ¿No se te ocurre alguna solución paginada? Eso lo haría mucho más rápido. Seguro que demandaría más trabajo, pero será una experiencia de usuario mucho más rica.
Seb

7
Este es bueno. El problema es que esto también eliminará los encabezados de las tablas.
isuru

3
elimina encabezados :(
Sandeep Kushwah

5
Esto eliminará todo en la tabla, incluidos los encabezados. Supongo que @morgancodes quiere eliminar el contenido, también conocido como las filas, no los encabezados. Para aquellos que encuentran esto más tarde, la solución sería $('#mytable tbody').empty();. Esto asegura que solo se vacíe el tbody.
OmniOwl

82

Es mejor evitar cualquier tipo de bucles, simplemente elimine todos los elementos directamente así:

$("#mytable > tbody").html("");

6
html("")llamadas empty()internas
Emile Bergeron

8
Buena solución para mí porque no elimina el encabezado de una tabla. ¡Gracias!
Daria

@Daria usa los selectores al máximo, esto mantendrá tus encabezados en su lugar: $ ('table tbody'). Empty ();
Dani

cuál es la diferencia entre usar ("#mytable> tbody") y ("#mytable tbody").
eaglei22

1
Si tiene una tabla anidada en una fila de su tabla, también eliminaría esas etiquetas tbody. Si solo tiene una mesa, no debería ser muy diferente.
Shiroy

6

El uso de separar es magnitudes más rápido que cualquiera de las otras respuestas aquí:

$('#mytable').find('tbody').detach();

No olvides volver a colocar el elemento tbody en la mesa ya que detach lo eliminó:

$('#mytable').append($('<tbody>'));  

También tenga en cuenta que al hablar la $(target).find(child)sintaxis de eficiencia es más rápida que $(target > child). ¿Por qué? ¡Chisporrotear!

Tiempo transcurrido para vaciar 3161 filas de tablas

Usando el método Detach () (como se muestra en mi ejemplo anterior):

  • Firefox: 0.027 s
  • Cromo: 0.027 s
  • Borde: 1,73 s
  • IE11: 4.02s

Usando el método vacío ():

  • Firefox: 0.055 s
  • Cromo: 0.052 s
  • Borde: 137,99 s (bien podría estar congelado)
  • IE11: se congela y nunca regresa


3

Dos problemas que puedo ver aquí:

  1. Los métodos empty () y remove () de jQuery en realidad hacen bastante trabajo. Consulte Perfiles de llamadas a funciones JavaScript de John Resig para conocer el motivo.

  2. La otra cosa es que para grandes cantidades de datos tabulares, podría considerar una biblioteca de cuadrículas de datos como las excelentes DataTables para cargar sus datos sobre la marcha desde el servidor, aumentando el número de llamadas de red, pero disminuyendo el tamaño de esas llamadas. Tenía una tabla muy complicada con 1500 filas que se volvió bastante lenta, el cambio a la nueva tabla basada en AJAX hizo que estos mismos datos parecieran bastante rápidos.


Gracias artlung. Hacer algo un poco así en realidad, obtener todos los datos a la vez del servidor, pero solo dibujar filas de la tabla cuando sea necesario.
morgancodes

Suena como una buena decisión. Me pregunto si preocuparse por la cantidad de filas en una tabla en un navegador siempre será un problema, o si la memoria para la mayoría de las computadoras aumenta, esto será un problema menor.
artlung

La memoria no es un problema con la cantidad de datos que estoy cargando. El cuello de botella es la manipulación DOM.
morgancodes

Creo que estamos diciendo lo mismo. Cuantos más datos cargue, más nodos DOM cargará, para mí estos están relacionados en términos de memoria necesaria. Espero que tu situación haya mejorado, independientemente.
artlung

1

si desea eliminar solo rápido ... puede hacer lo siguiente ...

$( "#tableId tbody tr" ).each( function(){
  this.parentNode.removeChild( this ); 
});

pero, puede haber algunos elementos vinculados a eventos en la tabla,

en ese caso,

El código anterior no evita la pérdida de memoria en IE ... TT y no es rápido en FF ...

lo siento....


0

esto funciona para mi:

1- agregue una clase para cada fila "removeRow"

2- en jQuery

$(".removeRow").remove();

-2

Podrías probar esto ...

var myTable= document.getElementById("myTable");
if(myTable== null)
    return;
var oTBody = myTable.getElementsByTagName("TBODY")[0];
if(oTBody== null)
    return;
try
{
    oTBody.innerHTML = "";
}
catch(e)
{
    for(var i=0, j=myTable.rows.length; i<j; i++)
        myTable.deleteRow(0);
}
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.