wyczyść jQuery tabeli

104

Mam tabelę HTML wypełnioną wieloma wierszami.

Jak mogę usunąć wszystkie wiersze z tabeli?

uczenie się
źródło

Odpowiedzi:

163

Użyj .remove ()

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

Jeśli chcesz zachować dane do wykorzystania w przyszłości nawet po ich usunięciu, możesz użyć .detach ()

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

Jeśli wiersze są elementami podrzędnymi tabeli, możesz użyć selektora podrzędnego zamiast selektora podrzędnego, na przykład

$("#yourtableid > tr").remove();
rahul
źródło
16
ostrożnie z tym ostatnim: większość przeglądarek dodaje niejawny tbodyelement wokół trelementów.
nickf
96

Jeśli chcesz wyczyścić dane, ale zachować nagłówki:

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

Tabelę należy sformatować w następujący sposób:

<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
źródło
to działa, ale powoduje usunięcie samego „tbody” z całym „tr” w środku.
Hakan Fıstık
Masz rację, @HakamFostok. Zredagowałem moją odpowiedź, aby zamiast tego użyć pustego ()
HoffZ,
41

Nieco szybciej niż wyjmowanie każdego z nich osobno:

$('#myTable').empty()

Technicznie rzecz biorąc, będzie to usunąć thead, tfoota tbodyelementy też.

nickf
źródło
27

Potrzebowałem tego:

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

Usuwa wszystkie wiersze z wyjątkiem nagłówka.

Bumptious Q Bangwhistle
źródło
12

Opcja jądrowa:

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

Niszczy wszystko w środku #yourtableid. Uważaj na swoje selektory, ponieważ zniszczy to każdy kod HTML w selektorze, który przejdziesz!

KevinDeus
źródło
2
+1 za atom :). Ale trzeba zrozumieć, że to nie jest „najlepszy” styl :) Generalnie nie polecam
Budda
lol. Zgoda. Używałem tej konkretnej metody w przeszłości do przyspieszania i rozwiązywania trudnych sytuacji . Ma pewne użyteczne zastosowanie w dziedzinie aplikacji JQuery.
KevinDeus
11
$("#employeeTable td").parent().remove();

Spowoduje to usunięcie wszystkich trmając tdjako dziecko. tzn. wszystkie wiersze z wyjątkiem nagłówka zostaną usunięte.

Mrinmoy Sen
źródło
Tylko to działa dla mnie. Usuń wszystko oprócz nagłówka ...
Elbert Villarreal,
6

Spowoduje to usunięcie wszystkich wierszy należących do treści, zachowując w ten sposób nagłówki i treść w stanie nienaruszonym:

$("#tableLoanInfos tbody tr").remove();
James Cooke
źródło
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>

I usuń:

$("#tblBody").empty();
miragessee
źródło
0
  $('#myTable > tr').remove();
saidesh kilaru
źródło
0

Posiadanie takiej tabeli (z nagłówkiem i treścią)

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

usuń każdy tr mający rodzica o nazwie tbody wewnątrz #tableId

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

i na odwrót, jeśli chcesz dodać do swojego stołu

$('#tableId tbody').append("<tr><td></td>....</tr>");
hichamkazan
źródło