jquery - schnellster Weg, um alle Zeilen aus einer sehr großen Tabelle zu entfernen

92

Ich dachte, dies könnte ein schneller Weg sein, um den Inhalt einer sehr großen Tabelle (3000 Zeilen) zu entfernen:

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

In Firefox dauert es jedoch ungefähr fünf Sekunden. Mache ich etwas Dummes (abgesehen vom Versuch, 3000 Zeilen in einen Browser zu laden)? Gibt es einen schnelleren Weg, dies zu tun?

javascript jquery dom Morgancodes
quelle

Antworten:

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

Das geht so schnell wie du nur kannst.

Seb
quelle
Hmmm. Frustrierend. Ich würde denken, dass das Löschen viel schneller ist als das Einfügen. Das bringt mich dazu, wirklich hässliche Dinge zu tun, wie einfach die Tabelle zu verstecken und eine neue zu erstellen, wenn ich sie aktualisieren möchte.
Morgancodes
10
Ja, gut ... HTML wurde nicht erstellt, um 3.000 Zeilen auf einer Seite anzuzeigen :) Können Sie sich keine paginierte Lösung vorstellen? Das würde es viel schneller machen. Sicher würde es mehr Arbeit erfordern, aber es wird eine viel reichhaltigere Benutzererfahrung sein.
Seb
7
Dieses ist gut. Das Problem ist, dass dadurch auch Tabellenüberschriften entfernt werden.
Isuru
2
entfernt Header :(
Sandeep Kushwah
4
Dadurch wird alles in der Tabelle entfernt, einschließlich der Überschriften. Ich gehe davon aus, dass @morgancodes den Inhalt, auch bekannt als die Zeilen, entfernen möchte, nicht die Header. Für diejenigen, die dies später finden, wäre die Lösung $('#mytable tbody').empty();. Dies stellt sicher, dass nur der Körper geleert wird.
OmniOwl
81

Es ist besser, Schleifen jeglicher Art zu vermeiden. Entfernen Sie einfach alle Elemente direkt wie folgt:

$("#mytable > tbody").html("");
gradosevic
quelle
6
html("")Anrufe empty()intern
Emile Bergeron
8
Gute Lösung für mich, weil dadurch der Header einer Tabelle nicht entfernt wird. Danke dir!
Daria
@Daria verwendet Selektoren in vollem Umfang. Dadurch bleiben Ihre Header an Ort und Stelle: $ ('table tbody'). Empty ();
Dani
Was ist der Unterschied zwischen der Verwendung von ("#mytable> tbody") und ("#mytable tbody")?
eaglei22
1
Wenn Sie eine verschachtelte Tabelle in einer Zeile Ihrer Tabelle haben, werden auch diese tbody-Tags entfernt. Wenn Sie nur eine einzige Tabelle haben, sollte es nicht viel anders sein.
Shiroy
6

Die Verwendung von "Ablösen" ist um Größenordnungen schneller als jede der anderen Antworten hier:

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

Vergessen Sie nicht, das tbody-Element wieder in die Tabelle aufzunehmen, da es durch Entfernen entfernt wurde:

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

Beachten Sie auch, dass die $(target).find(child)Syntax beim Sprechen schneller ist als $(target > child). Warum? Brutzeln!

Verstrichene Zeit zum Leeren von 3.161 Tabellenzeilen

Verwenden der Detach () -Methode (wie in meinem obigen Beispiel gezeigt):

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

Verwenden Sie die Methode empty ():

  • Firefox: 0,055 s
  • Chrome: 0,052 s
  • Rand: 137,99s (könnte genauso gut eingefroren sein)
  • IE11: Friert ein und kehrt nie zurück
Drew
quelle
4 
$("#myTable > tbody").empty();

Die Überschriften werden nicht berührt.

AlexCodeKeen
quelle
3

Zwei Probleme, die ich hier sehen kann:

  1. Die Methoden empty () und remove () von jQuery erledigen tatsächlich ziemlich viel Arbeit. Informationen dazu finden Sie in der JavaScript-Funktionsaufrufprofilerstellung von John Resig .

  2. Die andere Sache ist, dass Sie für große Mengen tabellarischer Daten möglicherweise eine Datagrid-Bibliothek wie die hervorragenden DataTables in Betracht ziehen , um Ihre Daten im laufenden Betrieb vom Server zu laden, die Anzahl der Netzwerkanrufe zu erhöhen, aber die Größe dieser Anrufe zu verringern. Ich hatte eine sehr komplizierte Tabelle mit 1500 Zeilen, die ziemlich langsam wurde. Der Wechsel zur neuen AJAX-basierten Tabelle ließ dieselben Daten ziemlich schnell erscheinen.

artlung
quelle
Danke artlung. Machen Sie so etwas tatsächlich, holen Sie alle Daten auf einmal vom Server, aber zeichnen Sie nur bei Bedarf Tabellenzeilen.
Morgancodes
Klingt nach einem guten Anruf. Ich frage mich, ob es immer ein Problem sein wird, sich Gedanken über die Anzahl der Zeilen in einer Tabelle in einem Browser zu machen, oder ob dies bei steigendem Speicher für die meisten Computer weniger problematisch ist.
Artlung
Der Speicher ist kein Problem mit der Datenmenge, die ich lade. Der Engpass ist die DOM-Manipulation.
Morgancodes
Ich denke, wir sagen dasselbe. Je mehr Daten Sie laden, desto mehr DOM-Knoten laden Sie. Für mich hängen diese mit dem benötigten Speicher zusammen. Ich hoffe, Ihre Situation hat sich trotzdem verbessert.
Artlung
1

Wenn Sie nur schnell entfernen möchten .. können Sie wie unten tun ..

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

Es können jedoch einige ereignisgebundene Elemente in der Tabelle vorhanden sein.

In diesem Fall,

Der obige Code verhindert nicht den Speicherverlust in IE ... TT und nicht schnell in FF ...

Es tut uns leid....


quelle
0

das funktioniert bei mir:

1- Klasse für jede Zeile "removeRow" hinzufügen

2- in der jQuery

$(".removeRow").remove();
Alsaket
quelle
-2

Sie könnten dies versuchen ...

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
quelle