jquery - najszybszy sposób na usunięcie wszystkich wierszy z bardzo dużej tabeli

Pomyślałem, że to może być szybki sposób na usunięcie zawartości bardzo dużej tabeli (3000 wierszy):

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

Ale w przeglądarce Firefox zajmuje to około pięciu sekund. Czy robię coś głupiego (poza próbą załadowania 3000 wierszy do przeglądarki)? Czy jest na to szybszy sposób?

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

To tak szybko, jak to możliwe.

Lepiej unikać wszelkiego rodzaju pętli, po prostu usuń wszystkie elementy bezpośrednio w ten sposób:

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

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

Nie dotknie nagłówków.

Użycie odłączenia jest o wielkości szybsze niż jakakolwiek inna odpowiedź tutaj:

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

Nie zapomnij umieścić elementu tbody z powrotem w tabeli, ponieważ detach usunął go:

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

Należy również zauważyć, że podczas mówienia $(target).find(child)składnia wydajności jest szybsza niż $(target > child). Czemu? Trzask!

Upływający czas do opróżnienia 3,161 wierszy tabeli

Korzystanie z metody Detach () (jak pokazano w moim przykładzie powyżej):

• Firefox: 0,027 s
• Chrome: 0,027 s
• Krawędź: 1,73 s
• IE11: 4.02s

Korzystanie z metody empty ():

• Firefox: 0,055 s
• Chrome: 0,052 s
• Edge: 137,99s (równie dobrze może być zamrożony)
• IE11: zawiesza się i nigdy nie wraca

Widzę tutaj dwie kwestie:

1. Metody empty () i remove () jQuery w rzeczywistości wykonują całkiem sporo pracy. Zobacz profilowanie wywołań funkcji JavaScript Johna Resiga, aby dowiedzieć się, dlaczego.

2. Inną rzeczą jest to, że w przypadku dużych ilości danych tabelarycznych można rozważyć bibliotekę datagrid, taką jak doskonałe DataTables do ładowania danych w locie z serwera, zwiększając liczbę wywołań sieciowych, ale zmniejszając rozmiar tych wywołań. Miałem bardzo skomplikowaną tabelę z 1500 wierszami, która była dość powolna, zmiana na nową tabelę opartą na AJAX sprawiła, że ​​te same dane wydawały się dość szybkie.

jeśli chcesz usunąć tylko szybko .. możesz zrobić jak poniżej ..

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

ale w tabeli mogą znajdować się elementy powiązane ze zdarzeniami,

w tym wypadku,

powyższy kod nie zapobiega wyciekowi pamięci w IE ... TT i nie jest szybki w FF ...

Przepraszam....

to działa dla mnie:

1- Dodaj klasę do każdego wiersza „removeRow”

2- w jQuery

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

Możesz spróbować tego ...

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