klare Tabelle jquery


103

Ich habe eine HTML-Tabelle mit mehreren Zeilen gefüllt.

Wie kann ich alle Zeilen aus der Tabelle entfernen ?

Antworten:


161

Verwenden Sie .remove ()

$("#yourtableid tr").remove();

Wenn Sie die Daten auch nach dem Entfernen für die zukünftige Verwendung aufbewahren möchten, können Sie .detach () verwenden.

$("#yourtableid tr").detach();

Wenn die Zeilen untergeordnete Elemente der Tabelle sind, können Sie die untergeordnete Auswahl anstelle der untergeordneten Auswahl verwenden, z

$("#yourtableid > tr").remove();

16
Vorsicht mit dem letzten: Die meisten Browser fügen ein implizites tbodyElement um die trElemente hinzu.
Nickf

96

Wenn Sie die Daten löschen möchten, aber die Überschriften behalten möchten:

$('#myTableId tbody').empty();

Die Tabelle muss folgendermaßen formatiert sein:

<table id="myTableId">
    <thead>
        <tr>
            <th>header1</th><th>header2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>data1</td><td>data2</td>
        </tr>
    </tbody>
</table>

das funktioniert, aber das Entfernen des 'tbody' selbst mit all dem 'tr' darin.
Hakan Fıstık

Du hast recht, @HakamFostok. Ich habe meine Antwort so bearbeitet, dass stattdessen leer () verwendet wird
HoffZ

41

Etwas schneller als jedes einzeln zu entfernen:

$('#myTable').empty()

Technisch wird dies entfernen thead, tfootund tbodyauch Elemente.



12

Die nukleare Option:

$("#yourtableid").html("");

Zerstört alles in #yourtableid. Seien Sie vorsichtig mit Ihren Selektoren, da dies jeden HTML-Code in dem Selektor zerstört, den Sie übergeben!


2
+1 für Atom :). Aber sollte verstehen, dass dies nicht der 'beste' Stil ist :) Ich würde es im Allgemeinen nicht empfehlen
Budda

lol. Einverstanden. Ich habe diese spezielle Methode in der Vergangenheit verwendet, um Geschwindigkeit zu erreichen und schwierige Situationen zu lösen . Es hat eine gültige Verwendung im Bereich von JQuery-Anwendungen.
KevinDeus

11
$("#employeeTable td").parent().remove();

Dies entfernt alle trmit tdals Kind. dh alle Zeilen außer dem Header werden gelöscht.


Dies ist der einzige, der für mich funktioniert. Löschen Sie alle außer dem Header ...
Elbert Villarreal

6

Dadurch werden alle zum Körper gehörenden Zeilen entfernt, wodurch die Überschriften und der Körper intakt bleiben:

$("#tableLoanInfos tbody tr").remove();

1
<table id="myTable" class="table" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
        </tr>
    </thead>
    <tbody id="tblBody">

    </tbody>
</table>

Und entfernen:

$("#tblBody").empty();


0

Eine solche Tabelle haben (mit einem Header und einem Body)

<table id="myTableId">
    <thead>
    </thead>
    <tbody>
   </tbody>
</table>

Entfernen Sie alle tr mit einem übergeordneten Element namens tbody in der #tableId

$('#tableId tbody > tr').remove();

und umgekehrt, wenn Sie Ihrer Tabelle hinzufügen möchten

$('#tableId tbody').append("<tr><td></td>....</tr>");
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.