Hapus semua baris dalam tabel HTML

Bagaimana saya dapat menghapus semua baris tabel HTML kecuali yang <th>menggunakan Javascript, dan tanpa mengulang semua baris dalam tabel? Saya memiliki tabel yang sangat besar dan saya tidak ingin membekukan UI saat saya mengulang baris untuk menghapusnya

Pertahankan <th>baris dalam a <thead>dan baris lainnya di <tbody>kemudian ganti <tbody>dengan yang baru, kosong.

yaitu

var new_tbody = document.createElement('tbody');
populate_with_new_rows(new_tbody);
old_tbody.parentNode.replaceChild(new_tbody, old_tbody)

ini akan menghapus semua baris:

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

Sangat kasar, tetapi ini juga berhasil:

var Table = document.getElementById("mytable");
Table.innerHTML = "";

Ini adalah pertanyaan lama, namun baru-baru ini saya mengalami masalah serupa.
Saya menulis kode ini untuk menyelesaikannya:

var elmtTable = document.getElementById('TABLE_ID_HERE');
var tableRows = elmtTable.getElementsByTagName('tr');
var rowCount = tableRows.length;

for (var x=rowCount-1; x>0; x--) {
   elmtTable.removeChild(tableRows[x]);
}

Itu akan menghapus semua baris, kecuali yang pertama.

Bersulang!

Poin yang perlu diperhatikan, di Waspadai kesalahan umum :

Jika indeks awal Anda adalah 0 (atau beberapa indeks dari awal), maka kode yang benar adalah:

var tableHeaderRowCount = 1;
var table = document.getElementById('WRITE_YOUR_HTML_TABLE_NAME_HERE');
var rowCount = table.rows.length;
for (var i = tableHeaderRowCount; i < rowCount; i++) {
    table.deleteRow(tableHeaderRowCount);
}

CATATAN

1. argumen untuk deleteRow telah diperbaiki.
Ini diperlukan karena saat kita menghapus baris, jumlah baris berkurang.
yaitu; pada saat saya mencapai (row.length - 1), atau bahkan sebelum baris itu telah dihapus, jadi Anda akan memiliki beberapa kesalahan / pengecualian (atau yang diam).

2. rowCount diambil sebelum perulangan for dimulai karena saat kita menghapus "table.rows.length" akan terus berubah, jadi sekali lagi Anda memiliki beberapa masalah, bahwa hanya baris ganjil atau genap saja yang dihapus.

Semoga membantu.

Dengan asumsi Anda hanya memiliki satu tabel sehingga Anda dapat mereferensikannya hanya dengan jenisnya. Jika Anda tidak ingin menghapus header:

$("tbody").children().remove()

jika tidak:

$("table").children().remove()

semoga membantu!

Saya perlu menghapus semua baris kecuali yang pertama dan solusi yang diposting oleh @strat tetapi itu menghasilkan pengecualian yang tidak tertangkap (merujuk Node dalam konteks yang tidak ada). Berikut ini berhasil untuk saya.

var myTable = document.getElementById("myTable");
var rowCount = myTable.rows.length;
for (var x=rowCount-1; x>0; x--) {
   myTable.deleteRow(x);
}

Jika Anda dapat mendeklarasikan IDuntuk, tbodyAnda cukup menjalankan fungsi ini:

var node = document.getElementById("tablebody");
while (node.hasChildNodes()) {
  node.removeChild(node.lastChild);
}

ini akan bekerja penghapusan iterasi dalam tabel HTML secara native

document.querySelectorAll("table tbody tr").forEach(function(e){e.remove()})

berikan kode di bawah ini bekerja dengan baik. Ini menghapus semua baris kecuali baris header. Jadi kode ini benar-benar t

$("#Your_Table tr>td").remove();

Memasukkan beberapa id ke tag tubuh. mis. Setelah ini, baris berikut harus mempertahankan header / footer tabel dan menghapus semua baris.

document.getElementById("yourID").innerHTML="";

Dan, jika Anda ingin seluruh tabel (header / baris / footer) dihapus, maka atur id pada tingkat tabel yaitu

Jika Anda tidak ingin menghapus thdan hanya ingin menghapus baris di dalamnya, ini berfungsi dengan sempurna.

var tb = document.getElementById('tableId');
  while(tb.rows.length > 1) {
  tb.deleteRow(1);
}

Bagaimana dengan ini:

Saat halaman pertama kali dimuat, lakukan ini:

var myTable = document.getElementById("myTable");
myTable.oldHTML=myTable.innerHTML;

Kemudian ketika Anda ingin membersihkan tabel:

myTable.innerHTML=myTable.oldHTML;

Hasilnya akan menjadi baris tajuk Anda jika hanya itu yang Anda mulai, kinerjanya jauh lebih cepat daripada perulangan.

Jika Anda memiliki <th>baris yang jauh lebih sedikit daripada non- <th>baris, Anda dapat mengumpulkan semua <th>baris menjadi string, menghapus seluruh tabel, dan kemudian menulis di <table>thstring</table>mana tabel sebelumnya.

EDIT: Di mana, jelas, "thstring" adalah html untuk semua baris <th>s.

Ini bekerja di IE tanpa harus mendeklarasikan var untuk tabel dan akan menghapus semua baris:

for(var i = 0; i < resultsTable.rows.length;)
{   
   resultsTable.deleteRow(i);
}

ini adalah kode sederhana yang baru saja saya tulis untuk menyelesaikannya, tanpa menghapus baris header (yang pertama).

var Tbl = document.getElementById('tblId');
while(Tbl.childNodes.length>2){Tbl.removeChild(Tbl.lastChild);}

Semoga berhasil untuk Anda !!.

Tetapkan id atau kelas untuk tbody Anda.

document.querySelector("#tbodyId").remove();
document.querySelectorAll(".tbodyClass").remove();

Anda dapat memberi nama id atau kelas sesuai keinginan Anda, tidak harus #tbodyIdatau .tbodyClass.

Bersihkan saja badan meja.

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

const table = document.querySelector ('table'); table.innerHTML === ''? null: table.innerHTML = ''; javascript di atas berfungsi dengan baik untuk saya. Ia memeriksa untuk melihat apakah tabel berisi data apa pun dan kemudian membersihkan semuanya termasuk header.