jquery - बहुत बड़ी तालिका से सभी पंक्तियों को हटाने का सबसे तेज़ तरीका

Question

मैंने सोचा कि यह एक बहुत बड़ी तालिका (3000 पंक्तियों) की सामग्री को हटाने का एक तेज़ तरीका हो सकता है:

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

लेकिन फायरफॉक्स में इसे पूरा होने में लगभग पांच सेकंड का समय लग रहा है। क्या मैं कुछ गूंगा कर रहा हूं (एक ब्राउज़र में 3000 पंक्तियों को लोड करने की कोशिश से अलग)? वहाँ यह करने के लिए तेजी से तरीका है?

Answer 1

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

जितना तेज हो उतना अच्छा है।

Comments

हममम। निराशा होती। मुझे लगता है कि विलोपन सम्मिलन की तुलना में बहुत तेज होगा। की तरह मुझे वास्तव में बदसूरत सामान करना चाहता है जैसे कि टेबल को छिपाएं और जब मैं इसे अपडेट करना चाहता हूं तो एक नया बनाएं।

— मोर्गनकोड्स 20

हाँ, ठीक है ... HTML एक पृष्ठ में 3k पंक्तियों को दिखाने के लिए नहीं बनाया गया था :) क्या आप किसी भी पृष्ठांकित समाधान के बारे में नहीं सोच सकते हैं? यह बहुत जल्दी कर देगा। यकीन है कि यह अधिक काम की मांग करेगा, लेकिन यह एक बहुत समृद्ध उपयोगकर्ता अनुभव होगा।

— सेब

यह एक अच्छा है। समस्या यह है कि टेबल हेडर को भी हटा दिया जाएगा।

— कुरु

हेडर निकालता है :(

— संदीप कुशवाह

यह हेडर सहित तालिका में सब कुछ हटा देगा। मुझे लगता है कि @morgancodes सामग्री को निकालना चाहता है, पंक्तियों को उर्फ, हेडर नहीं। उन लोगों के लिए जो इसे बाद में हल करते हैं $('#mytable tbody').empty();। यह सुनिश्चित करता है कि केवल tbody खाली हो जाए।

— ओमनीवेल

Answer 2

किसी भी प्रकार के लूप से बचने के लिए बेहतर है, बस सभी तत्वों को सीधे इस तरह हटा दें:

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

Comments

html("")empty()आंतरिक रूप से कहता है

— एमिल बर्जरॉन

मेरे लिए अच्छा समाधान है क्योंकि यह किसी तालिका के शीर्ष लेख को नहीं निकालता है। धन्यवाद!

— दरिया

@ डारिया चयनकर्ताओं को पूर्ण रूप से उपयोग करती है, इससे आपके हेडर जगह पर रहेंगे: $ ('तालिका tbody') खाली है;)।

— दानी

("#mytable> tbody") और ("#mytable tbody") का उपयोग करने के बीच क्या अंतर है।

— eaglei22

यदि आपके पास अपनी टेबल की एक पंक्ति में एक नेस्टेड टेबल है, तो यह उन टैग को भी हटा देगा। यदि आपके पास सिर्फ एक ही मेज है, तो यह बहुत अलग नहीं होनी चाहिए।

— शिरॉय

Answer 3

अलग-अलग जवाबों की तुलना में डिटैच का उपयोग तेज गति से होता है:

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

डिटैच हटाने के बाद से टेबल में वापस तत्व तत्व रखना न भूलें:

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

यह भी ध्यान दें कि जब दक्षता की बात करें तो $(target).find(child)वाक्य रचना की तुलना में तेजी है $(target > child)। क्यों? कड़ाके की धूप!

खाली समय 3,161 तालिका पंक्तियों को खाली करने के लिए

डिटैच () विधि का उपयोग करना (जैसा कि ऊपर मेरे उदाहरण में दिखाया गया है):

• फ़ायरफ़ॉक्स: 0.027 एस
• क्रोम: 0.027 एस
• बढ़त: 1.73 एस
• IE11: 4.02s

खाली () विधि का उपयोग करना:

• फ़ायरफ़ॉक्स: 0.055s
• क्रोम: 0.052s
• बढ़त: 137.99 s (के रूप में अच्छी तरह से जमे हुए किया जा सकता है)
• IE11: जमा देता है और कभी नहीं लौटता

Answer 4

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

यह हेडर को नहीं छुएगा।

Answer 5

दो मुद्दे जो मैं यहाँ देख सकता हूँ:

1. JQuery के खाली () और हटाने () तरीके वास्तव में काफी काम करते हैं। क्यों के लिए जॉन रेजिग के जावास्क्रिप्ट फ़ंक्शन कॉल प्रोफ़ाइल देखें ।

2. दूसरी बात यह है कि बड़ी मात्रा में सारणीबद्ध डेटा के लिए आप एक डेटाग्रैड लाइब्रेरी पर विचार कर सकते हैं जैसे कि सर्वर से मक्खी पर अपना डेटा लोड करने के लिए उत्कृष्ट डेटाटेबल्स , नेटवर्क कॉल की संख्या में वृद्धि, लेकिन उन कॉल का आकार घटाना। मेरे पास 1500 पंक्तियों के साथ एक बहुत ही जटिल तालिका थी जो काफी धीमी हो गई थी, नए AJAX आधारित तालिका में बदलने से यह समान डेटा के बजाय तेजी से प्रतीत होता है।

Comments

धन्यवाद आर्टलंग। वास्तव में ऐसा कुछ करना, सर्वर से एक ही बार में सभी डेटा प्राप्त करना, लेकिन जरूरत पड़ने पर केवल तालिका पंक्तियों को खींचना।

— मॉर्गनकोड्स

एक अच्छी कॉल की तरह लगता है। मैं सोच रहा हूं कि क्या ब्राउज़र में किसी तालिका में पंक्तियों की संख्या के बारे में चिंता करना हमेशा एक मुद्दा होगा, या यदि अधिकांश कंप्यूटरों के लिए मेमोरी बढ़ती है, तो यह एक समस्या से कम होगा।

— आर्टलंग

मेमोरी मेरे द्वारा लोड किए जा रहे डेटा की मात्रा के साथ कोई समस्या नहीं है। अड़चन डोम हेरफेर है।

— मोर्गनकोड्स

मुझे लगता है कि हम एक ही बात कह रहे हैं। जितना अधिक डेटा आप लोड करते हैं, उतना अधिक डोम नोड्स जो आप लोड करते हैं, मेरे लिए ये आवश्यक मेमोरी के संदर्भ में संबंधित हैं। मुझे उम्मीद है कि आपकी स्थिति में सुधार हुआ है, भले ही।

— आर्टलंग

Answer 6

यदि आप केवल तेजी से निकालना चाहते हैं .. तो आप नीचे की तरह कर सकते हैं ..

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

लेकिन, टेबल में कुछ ईवेंट-बाइंड किए गए तत्व हो सकते हैं,

उस स्तिथि में,

उपरोक्त कोड IE में मेमोरी रिसाव को नहीं रोक रहा है ... टीटी और एफएफ में तेज नहीं ...

माफ़ करना....

Answer 7

यह मेरे लिए काम करता है:

1- प्रत्येक पंक्ति "रिमरो" के लिए कक्षा जोड़ें

2- jQuery में

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

Answer 8

आप यह कोशिश कर सकते हैं ...

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