clear table jquery

104

J'ai un tableau HTML rempli d'un certain nombre de lignes.

Comment puis-je supprimer toutes les lignes du tableau?

apprentissage
la source

Réponses:

163

Utilisez .remove ()

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

Si vous souhaitez conserver les données pour une utilisation future même après les avoir supprimées, vous pouvez utiliser .detach ()

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

Si les lignes sont des enfants de la table, vous pouvez utiliser le sélecteur enfant au lieu du sélecteur descendant, comme

$("#yourtableid > tr").remove();
rahul
la source
16
attention à ce dernier: la plupart des navigateurs ajoutent un tbodyélément implicite autour des tréléments.
nickf
96

Si vous souhaitez effacer les données mais conserver les en-têtes:

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

Le tableau doit être formaté de cette manière:

<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
la source
cela fonctionne, mais cela supprime le «tbody» lui-même avec tout le «tr» à l'intérieur.
Hakan Fıstık
Vous avez raison, @HakamFostok. J'ai modifié ma réponse pour utiliser vide () à la place
HoffZ
41

Un peu plus rapide que de supprimer chacun d'eux individuellement:

$('#myTable').empty()

Techniquement, cela supprimera thead, tfootainsi que des tbodyéléments.

nickf
la source
27

J'avais besoin de ceci:

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

Il supprime toutes les lignes sauf l'en-tête.

Sifflet Q Bangwhistle
la source
12

L'option nucléaire:

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

Détruit tout à l'intérieur de #yourtableid. Soyez prudent avec vos sélecteurs, car cela détruira tout html dans le sélecteur que vous passez!

KevinDeus
la source
2
+1 pour le nucléaire :). Mais il faut comprendre que ce n'est pas le «meilleur» style :) Je ne le recommanderais pas en général
Budda
lol. D'accord. J'ai utilisé cette méthode particulière dans le passé pour la vitesse et la résolution de situations difficiles . Il a une utilisation valable dans le domaine des applications JQuery.
KevinDeus
11
$("#employeeTable td").parent().remove();

Cela supprimera tout travoir tdcomme enfant. c'est-à-dire que toutes les lignes sauf l'en-tête seront supprimées.

Mrinmoy Sen
la source
C'est le seul qui fonctionne pour moi. Supprimer tout sauf l'en-tête ...
Elbert Villarreal
6

Cela supprimera toutes les lignes appartenant au corps, gardant ainsi les en-têtes et le corps intacts:

$("#tableLoanInfos tbody tr").remove();
James Cooke
la source
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>

Et supprimer:

$("#tblBody").empty();
miragessee
la source
0
  $('#myTable > tr').remove();
saidesh kilaru
la source
0

Avoir un tableau comme celui-ci (avec un en-tête et un corps)

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

supprime chaque tr ayant un parent appelé tbody dans le #tableId

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

et inversement si vous souhaitez ajouter à votre tableau

$('#tableId tbody').append("<tr><td></td>....</tr>");
hichamkazan
la source