jQuery menghapus semua baris tabel kecuali yang pertama

280

Menggunakan jQuery, bagaimana cara saya menghapus semua baris dalam tabel kecuali yang pertama? Ini adalah upaya pertama saya menggunakan pemilih indeks. Jika saya memahami contoh-contoh dengan benar, berikut ini akan berfungsi:

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

yang akan saya baca sebagai "Bungkus beberapa tabel dalam objek jQuery, lalu hapus semua elemen 'tr' (baris) di mana indeks elemen dari baris tersebut lebih besar dari nol". Pada kenyataannya, ini dijalankan tanpa menghasilkan kesalahan, tetapi tidak menghapus baris apa pun dari tabel.

Apa yang saya lewatkan, dan bagaimana cara memperbaikinya? Tentu saja, saya bisa menggunakan javascript lurus, tapi saya bersenang-senang dengan jQuery sehingga saya ingin menyelesaikan ini menggunakan jQuery.

Ken Paul
sumber
Adakah yang tahu mengapa kode yang diberikan tidak berfungsi? Saya juga memiliki masalah ketika menempatkan pemilih filter dalam fungsi hapus
Leto
1
Sekarang saya mengerti ini dengan lebih baik, kode di atas tidak berfungsi karena $ (beberapa pemilih tabel) hanya memilih elemen tabel, bukan anak-anaknya, jadi tidak ada elemen 'tr' untuk menemukan fungsi hapus. Menggunakan fungsi find mencari kecocokan di antara anak-anak elemen tabel.
Ken Paul
Lihat jawaban ini stackoverflow.com/questions/4831334/…
AuthorProxy

Jawaban:

522

Ini seharusnya bekerja:

$(document).ready(function() {
   $("someTableSelector").find("tr:gt(0)").remove();
});
Strelok
sumber
2
Bagaimana jika saya ingin menghapus baris tabel kecuali first dan seconde?
18
@ user594166 gunakan gt (1) alih-alih gt (0).
christianvuerings
6
Dari situs web 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. Saya akan merekomendasikan menggunakan $ ("# mytable> tr"). Slice (1) .remove ();
Chris_F
kode Anda tidak berfungsi untuk saya .. saya mengubah gt (0) menjadi gt (1) dan ini berhasil.
Saadk
113

Saya pikir ini lebih mudah dibaca mengingat maksudnya:

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

Menggunakan anak-anak juga menangani kasus di mana baris pertama berisi tabel dengan membatasi kedalaman pencarian.

Jika Anda memiliki elemen TBODY, Anda dapat melakukan ini:

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

Jika Anda memiliki elemen THEAD atau TFOOT, Anda harus melakukan sesuatu yang berbeda.

tvanfosson
sumber
2
re: lakukan sesuatu yang berbeda .... ini berfungsi:$('someTableSelector > tbody:last > tr:not(:first)').remove();
Cheeso
untuk menghapus semua anak saya harus menggunakan tanda kutip ganda. Tidak mengenalinya sebaliknya. $("#tasks").children().remove();
Doomsknight
40

Cara lain untuk mencapai ini adalah menggunakan fungsi kosong () dari jQuery dengan elemen thead dan tbody di tabel Anda.

Contoh tabel:

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

Dan perintah jQuery:

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

Ini akan menghapus setiap baris yang terdapat di elemen tbody di tabel Anda dan menyimpan elemen thead di mana tajuk Anda seharusnya. Ini bisa berguna ketika Anda hanya ingin me-refresh konten tabel.

jpmorin
sumber
3
Ini mungkin akan memiliki kinerja terbaik dari semua solusi yang ditawarkan, dan sangat elegan.
the.jxc
38

Jika itu aku, aku mungkin akan merebusnya menjadi pemilih tunggal:

$('someTableSelector tr:not(:first)').remove();
Dave Ward
sumber
Setuju, tetapi lebih spesifik harus mengatakan: $ ('someTableSelector tbody tr: not (: first)'). Remove ();
Marco Muciño
30

Pemilih Anda tidak perlu berada di dalam pemindahan Anda.

Seharusnya terlihat seperti:

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

Yang berarti memilih setiap baris kecuali yang pertama dalam tabel dengan ID dari tableID dan menghapusnya dari DOM.

CMPalmer
sumber
Saya setuju. Dalam kasus saya, objek tabel sebelumnya telah dipilih.
Ken Paul
Untuk Menghapus semua baris kecuali yang pertama: - $ ("# tableID tr: gt (1)"). Remove ();
Biki
9
$('#table tr').slice(1).remove();

Saya ingat menemukan 'irisan' lebih cepat daripada semua pendekatan lain, jadi letakkan saja di sini.

Makubex
sumber
Beberapa tidak bekerja untuk saya. Jawaban yang diterima tampaknya berhasil.
ankush981
gtsudah usang, ini adalah jawaban terbaik.
CyberEd
7

Pertimbangkan tabel dengan id tbl: kode jQuery adalah:

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

Untuk menghapus semua baris, kecuali yang pertama (kecuali tajuk), gunakan kode di bawah ini:

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

Biki
sumber
1

Cara termudah:

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

-Pertama referensi tabel-
dapatkan daftar elemen dan iris dan hapus elemen yang dipilih dari daftar

Pytholab
sumber
0

-Maaf ini jawaban yang sangat terlambat.

Cara termudah yang saya temukan untuk menghapus baris apa pun (dan semua baris lain melalui iterasi) adalah ini

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

Sisanya mudah.

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

terbungkus fungsi:

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

lalu panggil:

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

Ini bekerja dengan sempurna

$("#myTable tbody").children( 'tr:not(:first)' ).html("");
Infolet.org
sumber
Ya, itu sudah diposting beberapa kali sebelumnya. Ada yang baru?
Nico Haase
0

Ini bekerja dengan cara berikut dalam kasus saya dan berfungsi dengan baik

$("#compositeTable").find("tr:gt(1)").remove();
Saadk
sumber