jquery - วิธีที่เร็วที่สุดในการลบแถวทั้งหมดออกจากตารางขนาดใหญ่มาก

ฉันคิดว่านี่อาจเป็นวิธีที่รวดเร็วในการลบเนื้อหาของตารางขนาดใหญ่มาก (3000 แถว):

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

แต่ใช้เวลาประมาณห้าวินาทีในการดำเนินการใน firefox ฉันทำอะไรโง่ ๆ (นอกเหนือจากการพยายามโหลด 3000 แถวในเบราว์เซอร์)? มีวิธีที่เร็วกว่านี้ไหม

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

เร็วที่สุดเท่าที่คุณจะได้รับ

เป็นการดีกว่าที่จะหลีกเลี่ยงการวนซ้ำทุกประเภทเพียงแค่ลบองค์ประกอบทั้งหมดออกโดยตรงดังนี้:

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

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

มันจะไม่แตะส่วนหัว

การใช้การแยกจะเร็วกว่าคำตอบอื่น ๆ ที่นี่:

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

อย่าลืมใส่องค์ประกอบ tbody กลับเข้าไปในตารางตั้งแต่ถอดออก:

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

นอกจากนี้ทราบว่าเมื่อพูดถึงประสิทธิภาพการใช้ไวยากรณ์จะเร็วกว่า$(target).find(child) $(target > child)ทำไม? ฉ่า!

เวลาที่ผ่านไปเพื่อว่างเปล่า 3,161 แถวตาราง

ใช้เมธอด Detach () (ดังที่แสดงในตัวอย่างด้านบน):

• Firefox: 0.027 วินาที
• Chrome: 0.027 วินาที
• ขอบ: 1.73s
• IE11: 4.02 วินาที

ใช้เมธอด empty ():

• Firefox: 0.055 วินาที
• Chrome: 0.052 วินาที
• Edge: 137.99 วินาที (อาจถูกแช่แข็งเช่นกัน)
• IE11: ค้างและไม่กลับมา

สองประเด็นที่ฉันสามารถดูได้ที่นี่:

1. เมธอด empty () และ remove () ของ jQuery ทำงานได้ไม่น้อย ดูเหตุผลในการเรียกใช้ฟังก์ชัน JavaScriptของ John Resig

2. อีกประการหนึ่งคือสำหรับข้อมูลแบบตารางจำนวนมากคุณอาจพิจารณาไลบรารีดาต้ากริดเช่นDataTables ที่ยอดเยี่ยมเพื่อโหลดข้อมูลของคุณได้ทันทีจากเซิร์ฟเวอร์เพิ่มจำนวนการโทรเครือข่าย แต่ลดขนาดของการโทรเหล่านั้น ฉันมีตารางที่ซับซ้อนมากซึ่งมี 1500 แถวที่ค่อนข้างช้าการเปลี่ยนเป็นตารางที่ใช้ AJAX ใหม่ทำให้ข้อมูลเดียวกันนี้ดูค่อนข้างเร็ว

หากต้องการลบเร็วเท่านั้น.. ทำได้ดังนี้ ..

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

แต่อาจมีองค์ประกอบที่เชื่อมโยงกับเหตุการณ์ในตาราง

ในกรณีนั้น,

โค้ดด้านบนไม่ได้ป้องกันหน่วยความจำรั่วใน IE ... TT และไม่เร็วใน FF ...

ขอโทษครับ ....

สิ่งนี้ใช้ได้กับฉัน:

1- เพิ่มคลาสสำหรับแต่ละแถว "removeRow"

2- ใน jQuery

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

คุณสามารถลองสิ่งนี้ ...

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