effacer un tableau jquery

J'ai une table HTML remplie d'un certain nombre de lignes.

Comment supprime toutes les lignes de la table?

80
demandé sur Academy of Programmer 2010-04-12 10:14:56

10 réponses

Utiliser .supprimer()

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

Si vous souhaitez conserver les données pour une utilisation ultérieure, même après le retrait, vous pouvez l'utiliser .détacher()

$("#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();
131
répondu rahul 2010-04-12 06:15:46

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

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

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

<table id="myTableId">
    <thead>
        <tr>
            <th>header1</th><th>header2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>data1</td><td>data2</td>
        </tr>
    </tbody>
</table>
63
répondu HoffZ 2018-09-22 13:08:51

Légèrement plus rapide que de retirer chacun individuellement:

$('#myTable').empty()

Techniquement, cela permettra d'éliminer thead, tfoot et tbody éléments de trop.

39
répondu nickf 2010-04-12 06:19:19

J'avais besoin de ceci:

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

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

27
répondu Bumptious Q Bangwhistle 2012-03-12 20:11:17

L'option nucléaire:

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

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

10
répondu KevinDeus 2012-08-10 22:30:59
$("#employeeTable td").parent().remove();

Cela supprimera tous les tr ayant {[2] } comme enfant. c'est-à-dire que toutes les lignes sauf l'en-tête seront supprimées.

8
répondu Mrinmoy Sen 2013-10-20 10:06:17

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

$("#tableLoanInfos tbody tr").Supprimer ();

2
répondu James Cooke 2017-09-18 19:23:46
  $('#myTable > tr').remove();
0
répondu saidesh kilaru 2013-10-11 10:30:24

Ayant une table comme celle-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 en sens inverse si vous voulez ajouter à votre table

$('#tableId tbody').append("<tr><td></td>....</tr>");
0
répondu hichamkazan 2017-05-23 12:17:02
<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();
0
répondu miragessee 2017-07-01 17:11:48