So entfernen Sie alle <tr> aus einer Tabelle außer dem ersten verwenden von jquery

Ich habe eine Tabelle und die möchte ich alle entfernen <tr> von der Tabelle mit Ausnahme der ersten. Wie kann ich das machen.?

  • Ist die erste Zeile semantisch einen header? Wenn ja, kann es besser sein, ändern Sie Ihr markup ein bisschen, und es würden noch einfacher Skript.
InformationsquelleAutor kbvishnu | 2011-01-03
  1. 5

    Gibt es mehrere Methoden hier, die meisten knapp ist, verwenden Sie die :gt() Selektor, wie dies:

    $('#tableID tr:gt(0)').remove();
    InformationsquelleAutor Nick Craver
  2. 6

    Ist es eine Besondere Bedeutung, um die erste Zeile? Ich werde gehen auf ein Glied und sagen, dass die erste Zeile ist wahrscheinlich die Zeile, die die Spaltenüberschriften enthält.

    Wenn ja, ist eine einfache Möglichkeit ist, die erste Zeile in einem <thead> und dem Körper alle Zeilen in einer <tbody>. Dann könnte man einfach tun:

    $('#myTable tbody tr').remove();

    Dieser bietet auch Ihrem HTML mehr semantische Bedeutung.

    InformationsquelleAutor Crast
  3. 3

    Ich denke, ich werde auf den Zug aufspringen und bieten einige Lösungen:

    Wenn Sie thead für die erste Zeile, legen Sie einfach das trs in der tbody:

    $('#myTable tbody tr').remove();

    Wenn du nicht mit thead können Sie die nachfolgenden Reihen auf vielfältige Weise. Ich sehr empfehlen, Suche durch die jQuery api

    Hier sind ein paar Beispiele, wie Sie können entfernen Sie die Zeilen:

    1. $('#myTable tr + tr').remove();
    2. $('#myTable tr:gt(0)').remove();
    3. $('#myTable tr:not(:first-child)').remove();
    4. $('#myTable').find('tr').not(':first-child').remove();
    5. $('#myTable tr:first-child').siblings().remove();

    Wirklich es kommt darauf an, wie kreativ Sie wollen in Ihrem Selektoren, und was Ihre Absichten sind. Ich habe nicht eine filter-Beispiel, aber mit filter wird Ihnen erlauben, zu rufen end und weiterhin die Verkettung von einem übergeordneten element.

    Sie haben zu tun, einige unit-tests, um zu sehen, welche der beiden Methoden die schnellsten sind, oder nicht, wenn es nicht so wichtig.

    • Das sind einige gute, kreative Lösungen, obwohl die zahlen 1, 3, 4 und 5 würde nicht das gewünschte Ergebnis, wenn es mehr als eine <tbody>. Ich hatte zwar gewähren, dass das wahrscheinlich nicht der Fall.
    • dw ich nehme an, dass ist wahr, aber wenn Sie mit mehreren tbodys, die Sie wahrscheinlich mit einem thead in dem Fall das erste Beispiel wäre die beste Wahl. Guten Fang, obwohl.
    InformationsquelleAutor zzzzBov
  4. 3
    $('#theTable tr').slice(1).remove();

    Diese verwendet einen voll gültigen CSS-Selektor, um alle Zeilen der Tabelle, dann dauert eine .slice() des Satzes beginnend mit index 1 (die zweite Zeile) und schließlich Anrufe .remove() um die Zeilen zu entfernen.

    Den gültigen CSS-Selektor ist wichtig, weil es erlaubt jQuery/Brutzeln erfolgreich zu nutzen, die native querySelectorAll Methode, die eine extrem schnelle Auswahl.

    querySelectorAll unterstützt wird, in vielen Browsern, einschließlich IE8.

    EDIT:

    Obwohl Sie gebeten, für eine jQuery Lösung, ich dachte, ich würde werfen, der in einer systemeigenen DOM-API-Lösung, da es schneller als alles andere, und es ist wirklich ziemlich einfach.

    var rows = document.getElementById('theTable').rows;

while( rows[1] )
    rows[1].parentNode.removeChild( rows[1] );
    • jsperf.com/jquery-sizzle-selectors ich war testen Sie Ihre Behauptung, Sie stehen richtig, aber später Browsern angezeigt zu genießen, die neuen css3-Selektoren =)
    • Guter Punkt. Die 'table :first-child ~ tr' wird ein Gültiger Selektor, in den meisten (vielleicht allen) Fällen, obwohl es könnte technisch nicht erfüllen die Anforderungen, wenn es mehrere <tbody> Elemente. Es wäre toll, wenn :gt() oder :not(:first) gültig waren-Selektoren.
    InformationsquelleAutor user113716
  5. 1
    $('#myTable').find('tr').not(":first").remove();

    Beispiel:

    http://jsfiddle.net/TwqN3/

    • eine alternative zu diesem, von einem anderen SO posten: $('#someTableSelector tr:not(:first)').remove();
    InformationsquelleAutor Stefan Kendall
  6. 0

    Verwenden Sie die neben den Geschwister-Selektor:

    $('table :first-child ~ tr').entfernen();

    Beispiel:
    http://jsfiddle.net/TwqN3/2/
    (Dank an Stefan Kendall! Ich nicht wusste, jsfiddle.)

    InformationsquelleAutor fjsj
Schreibe einen Kommentar