jQuery supprime toutes les lignes du tableau sauf la première

280

À l'aide de jQuery, comment 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, les éléments suivants devraient fonctionner:

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

que je lirais comme "Envelopper un tableau dans un objet jQuery, puis supprimer tous les éléments" tr "(lignes) où l'index des éléments 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 du tableau.

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

Ken Paul
la source
Quelqu'un sait pourquoi le code donné ne fonctionne pas? J'ai également un problème lors de la mise du sélecteur de filtre dans la fonction de suppression
Leto
1
Maintenant que je comprends mieux, le code ci-dessus ne fonctionne pas car $ (un sélecteur de table) ne sélectionne que l'élément table, pas aucun de ses enfants, donc il n'y a pas d'élément 'tr' pour la fonction remove à trouver. L'utilisation de la fonction find recherche des correspondances parmi les enfants de l'élément table.
Ken Paul
Regardez cette réponse stackoverflow.com/questions/4831334/…
AuthorProxy

Réponses:

522

Cela devrait fonctionner:

$(document).ready(function() {
   $("someTableSelector").find("tr:gt(0)").remove();
});
Strelok
la source
2
Que se passe-t-il si je souhaite supprimer les lignes du tableau, sauf la première et la seconde?
18
@ user594166 utilisez gt (1) au lieu de gt (0).
christianvuerings
6
Depuis le site Web de jQuery: Because :gt() is a jQuery extension and not part of the CSS specification, queries using :gt() cannot take advantage of the performance boost provided by the native DOM querySelectorAll() method. For better performance in modern browsers, use $("your-pure-css-selector").slice(index) instead. je recommanderais d'utiliser $ ("# mytable> tr"). Slice (1) .remove ();
Chris_F
votre code n'a pas fonctionné pour moi .. j'ai changé gt (0) en gt (1) et cela a fonctionné.
saadk
113

Je pense que cela est plus lisible étant donné l'intention:

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

L'utilisation d'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 le faire:

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

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

tvanfosson
la source
2
re: faire quelque chose de différent .... cela fonctionne:$('someTableSelector > tbody:last > tr:not(:first)').remove();
Cheeso
pour supprimer tous les enfants, j'ai dû utiliser des guillemets doubles. Je ne l'ai pas reconnu autrement. $("#tasks").children().remove();
Doomsknight
40

Une autre façon d'y parvenir est d'utiliser la fonction empty () de jQuery avec les éléments thead et tbody dans votre table.

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 gardera l'élément thead là où votre en-tête devrait être. Cela peut être utile lorsque vous souhaitez actualiser uniquement le contenu d'une table.

jpmorin
la source
3
Cela va probablement avoir les meilleures performances de toutes les solutions proposées, et c'est très élégant.
the.jxc
38

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

$('someTableSelector tr:not(:first)').remove();
Dave Ward
la source
D'accord, mais plus spécifique, il faut dire: $ ('someTableSelector tbody tr: not (: first)'). Remove ();
Marco Muciño
30

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

Cela devrait ressembler à quelque chose comme:

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

Ce qui signifie sélectionner chaque ligne sauf la première du tableau avec l'ID de tableID et les supprimer du DOM.

CMPalmer
la source
Je suis d'accord. Dans mon cas, l'objet table avait été précédemment sélectionné.
Ken Paul
Pour supprimer toutes les lignes sauf la première: - $ ("# tableID tr: gt (1)"). Remove ();
Biki
9
$('#table tr').slice(1).remove();

Je me souviens que rencontrer cette «tranche» est plus rapide que toutes les autres approches, alors mettez-la ici.

Makubex
la source
Certains cela n'a pas fonctionné pour moi. La réponse acceptée semble faire l'affaire.
ankush981
gtest obsolète, c'est la meilleure réponse.
CyberEd
7

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

$('#tbl tr:not(:first)').remove();
Sanket Utekar
la source
3

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

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

Biki
la source
1

Manière la plus simple:

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

-première référence à la table
-obtenir la liste des éléments et la découper et supprimer les éléments sélectionnés de la liste

Pytholabs
la source
0

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

La façon la plus simple que j'ai trouvée pour supprimer une ligne (et toutes les autres lignes par itération) est la suivante:

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

Le reste est facile.

Farjad
la source
0
$ ("# p-items"). find ('tr.row-items') .remove ();
Pramod
la source
0

enveloppé dans une fonction:

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

puis appelez-le:

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

Cela fonctionne parfaitement

$("#myTable tbody").children( 'tr:not(:first)' ).html("");
Infolet.org
la source
Oui, cela a déjà été publié plusieurs fois auparavant. Rien de nouveau?
Nico Haase
0

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

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