web-dev-qa-db-fra.com

jquery - moyen le plus rapide de supprimer toutes les lignes d'une très grande table

J'ai pensé que cela pourrait être un moyen rapide de supprimer le contenu d'un très grand tableau (3000 lignes):

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

Mais cela prend environ cinq secondes à compléter dans Firefox. Est-ce que je fais quelque chose de stupide (à part d'essayer de charger 3000 lignes dans un navigateur)? Y a-t-il un moyen plus rapide de le faire?

javascriptjquerydom
87
morgancodes
$("#your-table-id").empty();

C'est aussi vite que vous obtenez.

197
Seb

Il est préférable d'éviter tout type de boucle, il suffit de supprimer tous les éléments directement comme ceci:

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

L'utilisation de détachement est une ampleur plus rapide que n'importe laquelle des réponses suivantes:

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

N'oubliez pas de replacer l'élément tbody dans la table car détachement l'a retiré:

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

Notez également que lorsqu’on parle d’efficacité, la syntaxe $(target).find(child) est plus rapide que $(target > child). Pourquoi? Sizzle!

Temps écoulé jusqu'à vider 3 161 lignes de table

Utilisation de la méthode Detach () (comme dans l'exemple ci-dessus):

  • Firefox: 0.027s
  • Chrome: 0.027s
  • Edge: 1.73s
  • IE11: 4.02s

Utilisation de la méthode empty ():

  • Firefox: 0.055s
  • Chrome: 0.052s
  • Edge: 137.99s (pourrait aussi bien être gelé)
  • IE11: se fige et ne revient jamais
5
Drew

Je peux voir deux problèmes ici:

  1. Les méthodes empty () et remove () de jQuery effectuent beaucoup de travail. Voir John Resig's profilage d'appel de fonction JavaScript pour savoir pourquoi.

  2. L'autre chose est que pour de grandes quantités de données tabulaires, vous pouvez envisager une bibliothèque de grille de données telle que l'excellent DataTables pour charger vos données à la volée à partir du serveur, ce qui augmente le nombre d'appels réseau, mais diminue la taille de ces appels. J'ai eu une table très compliquée avec 1500 lignes qui est devenue assez lente, en passant à la nouvelle table basée sur AJAX), les mêmes données semblent assez rapides.

3
artlung
$("#myTable > tbody").empty();

Cela ne touchera pas les en-têtes.

3
AlexCodeKeen

si vous voulez enlever seulement vite .. vous pouvez faire comme ci-dessous ..

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

mais, il peut y avoir des éléments liés à un événement dans la table,

dans ce cas,

le code ci-dessus n’empêche pas les fuites de mémoire dans IE ... T-T et pas rapidement dans FF ...

désolé....

0
nayasis