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.