jelas tabel jquery


104

Saya memiliki tabel HTML yang diisi dengan sejumlah baris.

Bagaimana cara menghapus semua baris dari tabel?

Jawaban:


163

Gunakan .remove ()

$("#yourtableid tr").remove();

Jika Anda ingin menyimpan data untuk penggunaan di masa mendatang bahkan setelah menghapusnya, Anda dapat menggunakan .detach ()

$("#yourtableid tr").detach();

Jika baris adalah anak dari tabel maka Anda dapat menggunakan pemilih anak alih-alih pemilih keturunan, seperti

$("#yourtableid > tr").remove();

16
Berhati-hatilah dengan yang terakhir itu: kebanyakan browser menambahkan tbodyelemen implisit di sekitar trelemen.
nickf

96

Jika Anda ingin menghapus data tetapi tetap menggunakan header:

$('#myTableId tbody').empty();

Tabel harus diformat dengan cara ini:

<table id="myTableId">
    <thead>
        <tr>
            <th>header1</th><th>header2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>data1</td><td>data2</td>
        </tr>
    </tbody>
</table>

ini berfungsi, tapi ini menghilangkan 'tbody' itu sendiri dengan semua 'tr' di dalamnya.
Hakan Fıstık

Anda benar, @HakamFostok. Saya telah mengedit jawaban saya untuk menggunakan empty () sebagai gantinya
HoffZ

41

Sedikit lebih cepat daripada menghapusnya satu per satu:

$('#myTable').empty()

Secara teknis, ini akan menghapus thead, tfootdan tbodyelemen juga.



12

Opsi nuklir:

$("#yourtableid").html("");

Hancurkan semua yang ada di dalamnya #yourtableid. Berhati-hatilah dengan penyeleksi Anda, karena ini akan menghancurkan semua html di selektor yang Anda lewati!


2
1 untuk nuklir :). Tetapi harus dipahami bahwa itu bukan gaya 'terbaik' :) Saya tidak akan merekomendasikannya secara umum
Budda

lol. Sepakat. Saya telah menggunakan metode khusus ini di masa lalu untuk kecepatan dan menyelesaikan situasi sulit . Ini memiliki beberapa penggunaan yang valid di bidang aplikasi JQuery.
KevinDeus

11
$("#employeeTable td").parent().remove();

Ini akan menghapus semua trmemiliki tdsebagai anak. yaitu semua baris kecuali header akan dihapus.


Ini adalah satu-satunya yang berhasil untuk saya. Hapus semua kecuali header ...
Elbert Villarreal

6

Ini akan menghapus semua baris milik body, sehingga header dan body tetap utuh:

$("#tableLoanInfos tbody tr").remove();

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

Dan Hapus:

$("#tblBody").empty();


0

Memiliki tabel seperti ini (dengan header dan body)

<table id="myTableId">
    <thead>
    </thead>
    <tbody>
   </tbody>
</table>

hapus setiap tr yang memiliki induk bernama tbody di dalam #tableId

$('#tableId tbody > tr').remove();

dan sebaliknya jika Anda ingin menambahkan ke meja Anda

$('#tableId tbody').append("<tr><td></td>....</tr>");
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.