jQuery löscht alle Tabellenzeilen außer der ersten


280

Wie lösche ich mit jQuery alle Zeilen in einer Tabelle mit Ausnahme der ersten? Dies ist mein erster Versuch, Indexselektoren zu verwenden. Wenn ich die Beispiele richtig verstehe, sollte Folgendes funktionieren:

$(some table selector).remove("tr:gt(0)");

Dies würde ich als "Wickeln Sie eine Tabelle in ein jQuery-Objekt ein und entfernen Sie dann alle 'tr'-Elemente (Zeilen), bei denen der Elementindex solcher Zeilen größer als Null ist" lesen. In Wirklichkeit wird es ohne Fehler ausgeführt, entfernt jedoch keine Zeilen aus der Tabelle.

Was fehlt mir und wie behebe ich das? Natürlich könnte ich auch nur Javascript verwenden, aber ich habe so viel Spaß mit jQuery, dass ich dies gerne mit jQuery lösen möchte.


Weiß jemand, warum der angegebene Code nicht funktioniert? Ich habe auch ein Problem beim Einsetzen des Filterwählers in die Entfernungsfunktion
Leto

1
Jetzt, da ich das besser verstehe, funktioniert der obige Code nicht mehr, da $ (einige Tabellenauswahl) nur das Tabellenelement auswählt, keines seiner untergeordneten Elemente. Daher gibt es keine 'tr'-Elemente, die die Funktion remove finden kann. Mit der Suchfunktion wird nach Übereinstimmungen zwischen den untergeordneten Elementen des Tabellenelements gesucht.
Ken Paul

Schauen Sie sich diese Antwort an stackoverflow.com/questions/4831334/…
AuthorProxy

Antworten:


521

Das sollte funktionieren:

$(document).ready(function() {
   $("someTableSelector").find("tr:gt(0)").remove();
});

2
Was ist, wenn ich Tabellenzeilen außer first und seconde entfernen möchte?

18
@ user594166 benutze gt (1) anstelle von gt (0).
Christianvuerings

6
Von der jQuery-Website: Because :gt() is a jQuery extension and not part of the CSS specification, queries using :gt() cannot take advantage of the performance boost provided by the native DOM querySelectorAll() method. For better performance in modern browsers, use $("your-pure-css-selector").slice(index) instead. Ich würde empfehlen, $ ("# mytable> tr") zu verwenden. Slice (1) .remove ();
Chris_F

Ihr Code hat bei mir nicht funktioniert. Ich habe gt (0) in gt (1) geändert und das hat funktioniert.
Saadk

112

Ich denke, dies ist in Anbetracht der Absicht besser lesbar:

$('someTableSelector').children( 'tr:not(:first)' ).remove();

Die Verwendung von Kindern kümmert sich auch um den Fall, dass die erste Zeile eine Tabelle enthält, indem die Suchtiefe begrenzt wird.

Wenn Sie ein TBODY-Element hatten, können Sie dies tun:

$("someTableSelector > tbody:last").children().remove();

Wenn Sie THEAD- oder TFOOT-Elemente haben, müssen Sie etwas anderes tun.


2
re: etwas anderes machen .... das funktioniert:$('someTableSelector > tbody:last > tr:not(:first)').remove();
Cheeso

Um alle Kinder zu entfernen, musste ich doppelte Anführungszeichen verwenden. Ich habe es nicht anders erkannt. $("#tasks").children().remove();
Doomsknight

39

Eine andere Möglichkeit, dies zu erreichen, ist die Verwendung der Funktion empty () von jQuery mit den Elementen thead und tbody in Ihrer Tabelle.

Beispiel einer Tabelle:

<table id="tableId">
<thead>
    <tr><th>Col1</th><th>Col2</th></tr>
</thead>
<tbody>
    <tr><td>some</td><td>content</td></tr>
    <tr><td>to be</td><td>removed</td></tr>
</tbody>
</table>

Und der Befehl jQuery:

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

Dadurch werden alle im tbody-Element Ihrer Tabelle enthaltenen Zeilen entfernt und das thead-Element dort belassen, wo sich Ihre Kopfzeile befinden sollte. Dies kann nützlich sein, wenn Sie nur den Inhalt einer Tabelle aktualisieren möchten.


3
Dies wird wahrscheinlich die beste Leistung aller angebotenen Lösungen haben und ist sehr elegant.
the.jxc

37

Wenn ich es wäre, würde ich es wahrscheinlich auf einen einzigen Selektor reduzieren:

$('someTableSelector tr:not(:first)').remove();

Stimmen Sie zu, aber genauer muss es heißen: $ ('someTableSelector tbody tr: not (: first)'). Remove ();
Marco Muciño

29

Ihr Selektor muss sich nicht in Ihrer Entfernung befinden.

Es sollte ungefähr so ​​aussehen:

$("#tableID tr:gt(0)").remove();

Dies bedeutet, dass Sie jede Zeile mit Ausnahme der ersten in der Tabelle mit der ID tableID auswählen und aus dem DOM entfernen.


Genau. In meinem Fall war das Tabellenobjekt zuvor ausgewählt worden.
Ken Paul

So entfernen Sie alle Zeilen außer der ersten: - $ ("# tableID tr: gt (1)"). Remove ();
Biki

8
$('#table tr').slice(1).remove();

Ich erinnere mich, dass ich auf dieses „Slice“ gestoßen bin, das schneller ist als alle anderen Ansätze.


Bei einigen hat es bei mir nicht funktioniert. Die akzeptierte Antwort scheint den Trick zu tun.
ankush981

gtveraltet ist, ist dies die beste Antwort.
CyberEd

6

Stellen Sie sich eine Tabelle mit der ID vor tbl: Der jQuery-Code lautet:

$('#tbl tr:not(:first)').remove();

2

Verwenden Sie den folgenden Code, um alle Zeilen außer der ersten (außer der Kopfzeile) zu entfernen:

$("#dataTable tr:gt(1)").remove();


1

Einfachster Weg :

$("#mytable").find($("tr")).slice(1).remove()

-verweisen Sie zuerst auf die Tabelle
-get der Liste der Elemente und schneiden Sie sie und entfernen Sie die ausgewählten Elemente der Liste


0

-Schade, das ist eine sehr späte Antwort.

Der einfachste Weg, eine Zeile (und alle anderen Zeilen durch Iteration) zu löschen, ist dieser

$ ('# rowid', '# tableid'). remove ();

Der Rest ist einfach.


0
$ ("# p-items"). find ('tr.row-items') .remove ();

0

in eine Funktion eingewickelt:

function remove_rows(tablename) { 
    $(tablename).find("tr:gt(0)").remove();        
}

dann nenne es:

remove_rows('#table1');
remove_rows('#table2');

0

Das funktioniert perfekt

$("#myTable tbody").children( 'tr:not(:first)' ).html("");

Ja, das wurde schon mehrfach gepostet. Etwas Neues?
Nico Haase

0

Dies funktionierte in meinem Fall folgendermaßen und funktionierte einwandfrei

$("#compositeTable").find("tr:gt(1)").remove();
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.