Xóa tất cả các hàng trong bảng HTML

Làm cách nào tôi có thể xóa tất cả các hàng của bảng HTML ngoại trừ các hàng <th>đang sử dụng Javascript và không lặp lại tất cả các hàng trong bảng? Tôi có một bảng rất lớn và tôi không muốn đóng băng giao diện người dùng trong khi tôi đang lặp qua các hàng để xóa chúng

Giữ <th>hàng trong a <thead>và các hàng khác trong a <tbody>sau đó thay thế <tbody>bằng một hàng mới, trống.

I E

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

điều này sẽ xóa tất cả các hàng:

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

Rất thô, nhưng điều này cũng hoạt động:

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

Đây là một câu hỏi cũ, tuy nhiên gần đây tôi đã gặp vấn đề tương tự.
Tôi đã viết mã này để giải quyết nó:

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]);
}

Điều đó sẽ xóa tất cả các hàng, ngoại trừ hàng đầu tiên.

Chúc mừng!

Những điểm cần lưu ý, trong phần Chú ý các lỗi thường gặp :

Nếu chỉ mục bắt đầu của bạn là 0 (hoặc một số chỉ mục từ đầu), thì mã chính xác là:

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);
}

LƯU Ý

1. đối số cho deleteRow đã được sửa
điều này là bắt buộc vì khi chúng ta xóa một hàng, số lượng hàng sẽ giảm.
I E; vào thời điểm tôi đạt đến (row.length - 1), hoặc thậm chí trước khi hàng đó đã bị xóa, vì vậy bạn sẽ gặp một số lỗi / ngoại lệ (hoặc một lỗi im lặng).

2. rowCount được lấy trước khi vòng lặp for bắt đầu vì khi chúng ta xóa "table.rows.length" sẽ tiếp tục thay đổi, vì vậy một lần nữa bạn gặp một số vấn đề, rằng chỉ các hàng lẻ hoặc chẵn mới bị xóa.

Hy vọng rằng sẽ giúp.

Giả sử bạn chỉ có một bảng để bạn có thể tham khảo nó chỉ với kiểu. Nếu bạn không muốn xóa các tiêu đề:

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

nếu không thì:

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

hy vọng nó giúp!

Tôi cần xóa tất cả các hàng ngoại trừ giải pháp đầu tiên và giải pháp được đăng bởi @strat nhưng điều đó dẫn đến ngoại lệ không cần thiết (tham chiếu đến Node trong ngữ cảnh mà nó không tồn tại). Những điều sau đây đã làm việc cho tôi.

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

Nếu bạn có thể khai báo một IDcho tbodybạn có thể chỉ cần chạy hàm này:

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

điều này sẽ hoạt động xóa lặp lại trong bảng HTML ở dạng gốc

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

mã cho bên dưới hoạt động tuyệt vời. Nó loại bỏ tất cả các hàng ngoại trừ hàng tiêu đề. Vì vậy, mã này thực sự t

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

Gán một số id cho thẻ tbody. I E . Sau đó, dòng sau sẽ giữ lại đầu trang / chân trang của bảng và xóa tất cả các hàng.

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

Và, nếu bạn muốn toàn bộ bảng (đầu trang / hàng / chân trang) bị xóa sạch, thì hãy đặt id ở cấp bảng tức là

Nếu bạn không muốn loại bỏ thvà chỉ muốn loại bỏ các hàng bên trong, điều này đang hoạt động hoàn hảo.

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

Còn cái này thì sao:

Khi trang tải lần đầu tiên, hãy làm như sau:

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

Sau đó, khi bạn muốn xóa bảng:

myTable.innerHTML=myTable.oldHTML;

Kết quả sẽ là (các) hàng tiêu đề của bạn nếu đó là tất cả những gì bạn bắt đầu, hiệu suất nhanh hơn đáng kể so với lặp lại.

Nếu bạn có ít <th>hàng hơn nhiều so với không phải <th>hàng, bạn có thể tập hợp tất cả các <th>hàng thành một chuỗi, xóa toàn bộ bảng rồi viết<table>thstring</table> vị trí của bảng trước đây.

CHỈNH SỬA: Trong đó, rõ ràng, "thstring" là html cho tất cả các hàng của <th>s.

Điều này hoạt động trong IE mà không cần phải khai báo var cho bảng và sẽ xóa tất cả các hàng:

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

đây là một mã đơn giản tôi vừa viết để giải quyết vấn đề này, mà không xóa hàng tiêu đề (đầu tiên).

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

Hi vọng nó sẽ giúp ích cho bạn!!.

Gán một id hoặc một lớp cho tbody của bạn.

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

Bạn có thể đặt tên id hoặc lớp của mình theo cách bạn muốn, không nhất thiết phải #tbodyIdhoặc .tbodyClass.

Chỉ cần Xóa nội dung bảng.

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

const table = document.querySelector ('table'); table.innerHTML === ''? null: table.innerHTML = ''; javascript ở trên hoạt động tốt cho tôi. Nó kiểm tra xem bảng có chứa bất kỳ dữ liệu nào không và sau đó xóa mọi thứ kể cả tiêu đề.