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'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?

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

C'est aussi rapide que vous obtenez.

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

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

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

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

Cela ne touchera pas les en-têtes.

Deux problèmes que je peux voir ici:

1. 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.

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 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.

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é....

cela fonctionne pour moi:

1- ajouter une classe pour chaque ligne "removeRow"

2- dans le jQuery

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

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