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

93

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

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

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

javascript jquery dom

— Morgancodes
source

213

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

C'est aussi rapide que vous obtenez.

— Seb
source

Hmmm. Frustrant. Je pense que la suppression serait beaucoup plus rapide que l'insertion. Un peu me donne envie de faire des trucs vraiment moche comme simplement cacher la table et en créer une nouvelle quand je veux la mettre à jour.

— morgancodes

10

Ouais, eh bien ... HTML n'a pas été créé pour afficher 3k lignes dans une page :) Vous ne pouvez pas penser à une solution paginée? Cela rendrait les choses beaucoup plus rapides. Bien sûr, cela demanderait plus de travail, mais ce sera une expérience utilisateur beaucoup plus riche.

— Seb

7

Celui-ci est bien. Le problème est que cela supprimera également les en-têtes de tableau.

— isuru

3

supprime les en-têtes :(

— Sandeep Kushwah

5

Cela supprimera tout ce qui se trouve dans le tableau, y compris les en-têtes. Je suppose que @morgancodes veut supprimer le contenu, c'est-à-dire les lignes, pas les en-têtes. Pour ceux qui trouveront cela plus tard, la solution serait $('#mytable tbody').empty();. Cela garantit que seul le corps est vidé.

— OmniOwl

82

Il est préférable d'éviter tout type de boucles, supprimez simplement tous les éléments directement comme ceci:

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

— gradosevic
source

6

html("")appels en empty()interne

— Emile Bergeron

8

Belle solution pour moi car elle ne supprime pas l'en-tête d'un tableau. Je vous remercie!

— Daria

@Daria utilise les sélecteurs au maximum, cela gardera vos en-têtes en place: $ ('table tbody'). Empty ();

— Dani

quelle est la différence entre l'utilisation de ("#mytable> tbody") et ("#mytable tbody").

— eaglei22

1

Si vous avez une table imbriquée dans une ligne de votre table, cela supprimera également ces balises tbody. Si vous n'avez qu'une seule table, cela ne devrait pas être très différent.

— Shiroy

6

L'utilisation de détacher est plus rapide que n'importe laquelle des autres réponses ici:

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

N'oubliez pas de remettre l'élément tbody dans la table car detach l'a supprimé:

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

Notez également que lorsque vous parlez, la $(target).find(child)syntaxe d' efficacité est plus rapide que $(target > child). Pourquoi? Grésiller!

Temps écoulé pour vider 3161 lignes de tableau

En utilisant la méthode Detach () (comme indiqué dans mon exemple ci-dessus):

Firefox: 0,027 s
Chrome: 0,027 s
Bord: 1,73 s
IE11: 4.02s

En utilisant la méthode empty ():

Firefox: 0,055 s
Chrome: 0,052 s
Bord: 137,99 s (peut aussi bien être gelé)
IE11: se fige et ne revient jamais

— A dessiné
source

5

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

Cela ne touchera pas les en-têtes.

— AlexCodeKeen
source

3

Deux problèmes que je peux voir ici:

Les méthodes empty () et remove () de jQuery font en fait pas mal de travail. Voir le profilage des appels de fonction JavaScript de John Resig pour savoir pourquoi.
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 les excellents DataTables pour charger vos données à la volée à partir du serveur, augmentant le nombre d'appels réseau, mais diminuant la taille de ces appels. J'avais une table très compliquée avec 1500 lignes qui devenait assez lente, le passage à la nouvelle table basée sur AJAX a rendu ces mêmes données plutôt rapides.

— artlung
source

Merci artlung. Faire quelque chose d'un peu comme ça en fait, obtenir toutes les données à la fois du serveur, mais ne dessiner que des lignes de table lorsque cela est nécessaire.

— morgancodes

Sonne comme un bon appel. Je me demande si s'inquiéter du nombre de lignes dans une table dans un navigateur sera toujours un problème, ou si la mémoire de la plupart des ordinateurs augmentera, ce sera moins un problème.

— artlung

La mémoire n'est pas un problème avec la quantité de données que je charge. Le bottlneck est la manipulation DOM.

— morgancodes le

Je pense que nous disons la même chose. Plus vous chargez de données, plus vous chargez de nœuds DOM, pour moi, ceux-ci sont liés en termes de mémoire nécessaire. J'espère que votre situation s'est améliorée, quoi qu'il en soit.

— artlung le

1

si vous ne voulez supprimer que rapidement .. 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 une fuite de mémoire dans IE ... TT et pas rapide dans FF ...

Désolé....

0

cela fonctionne pour moi:

1- ajouter une classe pour chaque ligne "removeRow"

2- dans le jQuery

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

— Alsaket
source

-2

Vous pouvez essayer ceci ...

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

— Bilbo Waggins
source