jquery - cách nhanh nhất để xóa tất cả các hàng khỏi một bảng rất lớn

Tôi nghĩ đây có thể là một cách nhanh chóng để xóa nội dung của một bảng rất lớn (3000 hàng):

$jq("tbody", myTable).remove();

Nhưng mất khoảng năm giây để hoàn thành trong firefox. Tôi đang làm gì đó ngu ngốc (ngoài việc cố gắng tải 3000 hàng vào trình duyệt)? Có cách nào nhanh hơn để làm điều đó không?

$("#your-table-id").empty();

Đó là nhanh như bạn nhận được.

Tốt hơn là tránh bất kỳ loại vòng lặp nào, chỉ cần loại bỏ tất cả các phần tử trực tiếp như sau:

$("#mytable > tbody").html("");

Sử dụng detach nhanh hơn bất kỳ câu trả lời nào khác ở đây:

$('#mytable').find('tbody').detach();

Đừng quên đặt lại phần tử tbody vào bảng vì detach đã xóa nó:

$('#mytable').append($('<tbody>'));  

Cũng lưu ý rằng khi nói $(target).find(child)cú pháp hiệu quả nhanh hơn $(target > child). Tại sao? Xông khói!

Thời gian đã trôi qua để trống 3.161 dòng trong bảng

Sử dụng phương thức Detach () (như trong ví dụ của tôi ở trên):

• Firefox: 0,027 giây
• Chrome: 0,027 giây
• Cạnh: 1,73 giây
• IE11: 4.02 giây

Sử dụng phương thức rỗng ():

• Firefox: 0,055 giây
• Chrome: 0,052 giây
• Cạnh: 137,99 giây (cũng có thể bị đóng băng)
• IE11: Đóng băng và không bao giờ quay trở lại

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

Nó sẽ không chạm vào tiêu đề.

Hai vấn đề tôi có thể thấy ở đây:

1. Các phương thức void () và remove () của jQuery thực sự thực hiện khá nhiều công việc. Xem Hồ sơ cuộc gọi hàm JavaScript của John Resig để biết lý do.

2. Điều khác là đối với một lượng lớn dữ liệu dạng bảng, bạn có thể xem xét một thư viện datagrid như DataTables tuyệt vời để tải dữ liệu của bạn ngay lập tức từ máy chủ, tăng số lượng cuộc gọi mạng nhưng giảm kích thước của các cuộc gọi đó. Tôi có một bảng rất phức tạp với 1500 hàng khá chậm, việc thay đổi sang bảng dựa trên AJAX mới khiến dữ liệu tương tự này có vẻ khá nhanh.

nếu bạn chỉ muốn loại bỏ nhanh chóng .. bạn có thể làm như dưới đây ..

$( "#tableId tbody tr" ).each( function(){
  this.parentNode.removeChild( this ); 
});

nhưng, có thể có một số phần tử liên kết sự kiện trong bảng,

trong trường hợp đó,

mã trên không ngăn chặn rò rỉ bộ nhớ trong IE ... TT và không nhanh trong FF ...

lấy làm tiếc....

cái này phù hợp với tôi:

1- thêm lớp cho mỗi hàng "removeRow"

2- trong jQuery

$(".removeRow").remove();

Bạn có thể thử điều này ...

var myTable= document.getElementById("myTable");
if(myTable== null)
    return;
var oTBody = myTable.getElementsByTagName("TBODY")[0];
if(oTBody== null)
    return;
try
{
    oTBody.innerHTML = "";
}
catch(e)
{
    for(var i=0, j=myTable.rows.length; i<j; i++)
        myTable.deleteRow(0);
}