jquery: il modo più veloce per rimuovere tutte le righe da una tabella molto grande

Ho pensato che questo potesse essere un modo veloce per rimuovere il contenuto di una tabella molto grande (3000 righe):

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

Ma ci vogliono circa cinque secondi per completare in Firefox. Sto facendo qualcosa di stupido (a parte il tentativo di caricare 3000 righe in un browser)? C'è un modo più veloce per farlo?

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

È il più veloce possibile.

È meglio evitare qualsiasi tipo di loop, basta rimuovere tutti gli elementi direttamente in questo modo:

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

L'uso del distacco è di magnitudini più veloce di qualsiasi altra risposta qui:

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

Non dimenticare di rimettere l'elemento tbody nella tabella poiché scollegarlo lo ha rimosso:

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

Si noti inoltre che quando si parla di efficienza la $(target).find(child)sintassi è più veloce di $(target > child). Perché? Sfrigolare!

Tempo trascorso per svuotare 3.161 righe di tabella

Utilizzando il metodo Detach () (come mostrato nel mio esempio sopra):

• Firefox: 0,027 secondi
• Chrome: 0,027 s
• Bordo: 1,73 s
• IE11: 4.02s

Utilizzando il metodo empty ():

• Firefox: 0,055 secondi
• Chrome: 0,052 s
• Bordo: 137,99 s (potrebbe anche essere congelato)
• IE11: si blocca e non ritorna mai

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

Non toccherà le intestazioni.

Due problemi che posso vedere qui:

1. I metodi empty () e remove () di jQuery in realtà fanno un bel po 'di lavoro. Vedere JavaScript Function Call Profiling di John Resig per il motivo.

2. L'altra cosa è che per grandi quantità di dati tabulari potresti considerare una libreria datagrid come l'ottimo DataTables per caricare i tuoi dati al volo dal server, aumentando il numero di chiamate di rete, ma diminuendo la dimensione di quelle chiamate. Avevo una tabella molto complicata con 1500 righe che sono diventate piuttosto lente, il passaggio alla nuova tabella basata su AJAX ha reso questi stessi dati piuttosto veloci.

se vuoi rimuovere solo velocemente .. puoi fare come sotto ..

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

ma possono esserci alcuni elementi associati a eventi nella tabella,

in quel caso,

il codice sopra non impedisce la perdita di memoria in IE ... TT e non veloce in FF ...

spiacente....

questo funziona per me:

1- aggiungi classe per ogni riga "removeRow"

2- nel jQuery

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

Potresti provare questo ...

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