tavolo chiaro jquery


104

Ho una tabella HTML riempita con un numero di righe.

Come posso rimuovere tutte le righe dalla tabella?

Risposte:


163

Usa .remove ()

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

Se vuoi conservare i dati per un uso futuro anche dopo averli rimossi, puoi usare .detach ()

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

Se le righe sono figli della tabella, puoi usare il selettore figlio invece del selettore discendente, come

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

16
attenzione a quest'ultimo: la maggior parte dei browser aggiunge un tbodyelemento implicito attorno agli trelementi.
nickf

96

Se vuoi cancellare i dati ma mantenere le intestazioni:

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

La tabella deve essere formattata in questo modo:

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

questo funziona, ma rimuove il "tbody" stesso con tutto il "tr" al suo interno.
Hakan Fıstık

Hai ragione, @HakamFostok. Ho modificato la mia risposta per utilizzare invece empty ()
HoffZ

41

Leggermente più veloce rispetto alla rimozione di ciascuno individualmente:

$('#myTable').empty()

Tecnicamente, questo verrà rimosso thead, tfoote tbodygli elementi troppo.



12

L'opzione nucleare:

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

Distrugge tutto all'interno di #yourtableid. Fai attenzione con i tuoi selettori, poiché distruggerà qualsiasi html nel selettore che passi!


2
+1 per il nucleare :). Ma dovrebbe capire che non è lo stile "migliore" :) Non lo consiglierei in generale
Budda

lol. Concordato. Ho utilizzato questo particolare metodo in passato per velocizzare e risolvere situazioni difficili . Ha un uso valido nel regno delle applicazioni JQuery.
KevinDeus

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

Questo rimuoverà tutto ciò trche ha tdcome figlio. cioè tutte le righe tranne l'intestazione verranno eliminate.


Questo è l'unico che funziona per me. Cancella tutto tranne l'intestazione ...
Elbert Villarreal

6

Questo rimuoverà tutte le righe appartenenti al corpo, mantenendo così intatte le intestazioni e il corpo:

$("#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>

E rimuovi:

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


0

Avere una tabella come questa (con un'intestazione e un corpo)

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

rimuovere ogni tr con un genitore chiamato tbody all'interno di #tableId

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

e al contrario se vuoi aggiungere alla tua tavola

$('#tableId tbody').append("<tr><td></td>....</tr>");
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.