jQuery usuwa wszystkie wiersze tabeli oprócz pierwszego


280

Za pomocą jQuery, jak usunąć wszystkie wiersze w tabeli oprócz pierwszego? To moja pierwsza próba użycia selektorów indeksu. Jeśli dobrze rozumiem przykłady, następujące działania powinny działać:

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

który przeczytałbym jako „Zawiń tabelę w obiekt jQuery, a następnie usuń wszystkie elementy (wiersze)„ tr ”, gdzie indeks takich wierszy jest większy od zera”. W rzeczywistości wykonuje się bez generowania błędu, ale nie usuwa żadnych wierszy z tabeli.

Czego mi brakuje i jak to naprawić? Oczywiście, mógłbym użyć prostego javascript, ale tak dobrze się bawię z jQuery, że chciałbym rozwiązać to za pomocą jQuery.


Czy ktoś wie, dlaczego dany kod nie działa? Mam również problem z ustawieniem selektora filtrów w funkcji usuwania
— Leto,

1
Teraz, gdy rozumiem to lepiej, powyższy kod nie działa, ponieważ $ (jakiś selektor tabeli) wybiera tylko element table, a nie jego potomne, więc nie ma elementów „tr” do znalezienia przez funkcję remove. Za pomocą funkcji find wyszukuje dopasowania wśród elementów podrzędnych elementu table.
— Ken Paul

Odpowiedzi:


522

To powinno działać:

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

2
Co zrobić, jeśli chcę usunąć wiersze tabeli oprócz pierwszego i drugiego?

18
@ user594166 użyj gt (1) zamiast gt (0).
— christianvuerings,

6
Ze strony internetowej 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. Poleciłbym użycie $ ("# mytable> tr"). Slice (1) .remove ();
— Chris_F

twój kod nie działał dla mnie. Zmieniłem gt (0) na gt (1) i to zadziałało.
— saadk

113

Myślę, że jest to bardziej czytelne, biorąc pod uwagę zamiar:

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

Korzystanie z dzieci dba również o przypadek, w którym pierwszy wiersz zawiera tabelę, ograniczając głębokość wyszukiwania.

Jeśli masz element TBODY, możesz to zrobić:

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

Jeśli masz elementy THEAD lub TFOOT, musisz zrobić coś innego.


2
re: zrób coś innego .... to działa:$('someTableSelector > tbody:last > tr:not(:first)').remove();
— Cheeso

aby usunąć wszystkie dzieci, musiałem użyć podwójnych cudzysłowów. Nie rozpoznałem tego inaczej. $("#tasks").children().remove();
— Doomsknight,

40

Innym sposobem na osiągnięcie tego jest użycie funkcji pustej () jQuery z elementami thead i tbody w tabeli.

Przykład tabeli:

<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>

I polecenie jQuery:

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

Spowoduje to usunięcie wszystkich wierszy zawartych w elemencie tbody tabeli i zachowanie elementu thead w miejscu, w którym powinien znajdować się nagłówek. Może być przydatny, gdy chcesz odświeżyć tylko zawartość tabeli.


3
Prawdopodobnie będzie to miało najlepszą wydajność ze wszystkich oferowanych rozwiązań i jest bardzo eleganckie.
— the.jxc,

38

Gdybym to był ja, prawdopodobnie sprowadziłbym to do jednego selektora:

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

Zgadzam się, ale bardziej konkretnie musi powiedzieć: $ ('someTableSelector tbody tr: not (: first)'). Remove ();
— Marco Muciño

30

Twój selektor nie musi znajdować się w środku Twojego usunięcia.

Powinien wyglądać mniej więcej tak:

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

Co oznacza, że ​​zaznacz każdy wiersz oprócz pierwszego w tabeli o identyfikatorze tableID i usuń je z DOM.


Zgadzam się. W moim przypadku obiekt tabeli został wcześniej wybrany.
— Ken Paul

Aby usunąć wszystkie wiersze oprócz pierwszego: - $ ("# tableID tr: gt (1)"). Remove ();
— Biki,

9
$('#table tr').slice(1).remove();

Pamiętam, że natknięcie się na ten „kawałek” jest szybsze niż wszystkie inne podejścia, więc po prostu go tutaj umieść.


Niektóre nie działały dla mnie. Przyjęta odpowiedź wydaje się załatwić sprawę.
— ankush981,

gtjest przestarzałe, to najlepsza odpowiedź.
— CyberEd


3

Aby usunąć wszystkie wiersze oprócz pierwszego (oprócz nagłówka), użyj poniższego kodu:

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


1

Najprostszy sposób :

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

-pierwsze odwołanie do tabeli
-zbierz listę elementów i pokrój ją i usuń wybrane elementy z listy


0

- Przepraszam, to jest bardzo późna odpowiedź.

Najłatwiejszy sposób, jaki udało mi się usunąć dowolny wiersz (i wszystkie inne wiersze poprzez iterację) to

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

Reszta jest łatwa.



0

zawinięte w funkcję:

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

nazwij to:

remove_rows('#table1');
remove_rows('#table2');

0

To działa idealnie

$("#myTable tbody").children( 'tr:not(:first)' ).html("");

Tak, to było już wcześniej publikowane wiele razy. Nic nowego?
— Nico Haase,

0

W moim przypadku działało to w następujący sposób i działało dobrze

$("#compositeTable").find("tr:gt(1)").remove();
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.