klare Tabelle jquery

103

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

Wie kann ich alle Zeilen aus der Tabelle entfernen ?

Lernen
quelle

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();
rahul
quelle
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>
HoffZ
quelle
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.

nickf
quelle
27

Ich brauchte das:

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

Es werden alle Zeilen außer der Kopfzeile gelöscht.

Bumptious Q Bangwhistle
quelle
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!

KevinDeus
quelle
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.

Mrinmoy Sen.
quelle
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();
James Cooke
quelle
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();
Miragessee
quelle
0
  $('#myTable > tr').remove();
sagteesh kilaru
quelle
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>");
Hichamkazan
quelle