effacer un tableau jquery
J'ai une table HTML remplie d'un certain nombre de lignes.
Comment supprime toutes les lignes de la table?
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();
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>
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.
J'avais besoin de ceci:
$('#myTable tbody > tr').remove();
Il supprime toutes les lignes sauf l'en-tête.
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!
$("#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.
Cela supprimera toutes les lignes appartenant au corps, gardant ainsi les en-têtes et le corps intacts:
$("#tableLoanInfos tbody tr").Supprimer ();
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>");
<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();