web-dev-qa-db-fra.com

jQuery supprime toutes les lignes de la table sauf la première

Avec jQuery, comment puis-je supprimer toutes les lignes d'une table sauf la première? Ceci est ma première tentative d'utilisation de sélecteurs d'index. Si je comprends bien les exemples, ce qui suit devrait fonctionner:

$(some table selector).remove("tr:gt(0)");

que je lirais comme suit: "Enveloppe une table dans un objet jQuery, puis supprime tous les éléments 'tr' (lignes) où l'index d'élément de ces lignes est supérieur à zéro". En réalité, il s'exécute sans générer d'erreur, mais ne supprime aucune ligne de la table.

Qu'est-ce qui me manque et comment résoudre ce problème? Bien sûr, je pourrais utiliser du javascript direct, mais je m'amuse tellement avec jQuery que j'aimerais résoudre ce problème en utilisant jQuery.

jqueryjquery-selectors
271
Ken Paul

Cela devrait fonctionner:

$(document).ready(function() {
   $("someTableSelector").find("tr:gt(0)").remove();
});
493
Strelok

Je pense que cela est plus lisible compte tenu de l'intention:

$('someTableSelector').children( 'tr:not(:first)' ).remove();

L'utilisation des enfants prend également en charge le cas où la première ligne contient un tableau en limitant la profondeur de la recherche.

Si vous aviez un élément TBODY, vous pouvez faire ceci:

$("someTableSelector > tbody:last").children().remove();

Si vous avez des éléments THEAD ou TFOOT, vous devrez faire quelque chose de différent.

109
tvanfosson

Une autre façon de faire consiste à utiliser la fonction empty () de jQuery avec les éléments thead et tbody de votre tableau.

Exemple de tableau:

<table id="tableId">
<thead>
    <tr><th>Col1</th><th>Col2</th></tr>
</thead>
<tbody>
    <tr><td>some</td><td>content</td></tr>
    <tr><td>to be</td><td>removed</td></tr>
</tbody>
</table>

Et la commande jQuery:

$("#tableId > tbody").empty();

Cela supprimera toutes les lignes contenues dans l'élément tbody de votre table et conservera l'élément thead là où votre en-tête devrait être. Cela peut être utile lorsque vous souhaitez actualiser uniquement le contenu d'un tableau.

37
jpmorin

Si c'était moi, je le résumerais probablement à un seul sélecteur:

$('someTableSelector tr:not(:first)').remove();
36
Dave Ward

Votre sélecteur n'a pas besoin d'être à l'intérieur de votre retrait.

Cela devrait ressembler à quelque chose comme:

$("#tableID tr:gt(0)").remove();

Ce qui signifie que sélectionnez toutes les lignes sauf la première dans la table avec l'ID de tableID et supprimez-les du DOM.

29
CMPalmer

Considérons une table avec id tbl: le code jQuery serait:

$('#tbl tr:not(:first)').remove();
6
Sanket Utekar
$('#table tr').slice(1).remove();

Je me souviens d’avoir découvert que la "tranche" est plus rapide que toutes les autres approches, c’est donc simple.

6
Makubex

Pour supprimer toutes les lignes, à l'exception de la première (à l'exception de l'en-tête), utilisez le code ci-dessous:

$("#dataTable tr:gt(1)").remove();

1
Biki

Cela fonctionne parfaitement

$("#myTable tbody").children( 'tr:not(:first)' ).html("");
0
Infolet.org
 
 $ ("# p-items"). find ('tr.row-items') .remove ();
0
Pramod

Cela a fonctionné de la manière suivante dans mon cas et a bien fonctionné

$("#compositeTable").find("tr:gt(1)").remove();
0
saadk

enveloppé dans une fonction:

function remove_rows(tablename) { 
    $(tablename).find("tr:gt(0)").remove();        
}

puis appelez-le:

remove_rows('#table1');
remove_rows('#table2');
0
PodTech.io

-Désolé c'est une réponse très tardive.

Le moyen le plus simple que j'ai trouvé pour supprimer une ligne (et toutes les autres lignes par itération) est la suivante:

$ ('# rowid', '# tableid'). remove ();

Le reste est facile.

0
Farjad

Manière la plus simple:

$("#mytable").find($("tr")).slice(1).remove()

-première référence à la table
- récupère la liste des éléments, la découpe et supprime les éléments sélectionnés de la liste

0
Pytholabs