jquery - çok büyük bir tablodan tüm satırları kaldırmanın en hızlı yolu

96

Bunun çok büyük bir tablonun (3000 satır) içeriğini kaldırmanın hızlı bir yolu olabileceğini düşündüm:

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

Ancak firefox'ta tamamlanması yaklaşık beş saniye sürüyor. Aptalca bir şey mi yapıyorum (bir tarayıcıya 3000 satır yüklemeye çalışmanın dışında)? Bunu yapmanın daha hızlı yolu var mı?

javascript jquery dom

— morgancodes
kaynak

217

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

Aldığın kadar hızlı.

— Seb
kaynak

Hmmm. Sinir bozucu. Silmenin eklemeden çok daha hızlı olacağını düşünürdüm. Tabloyu gizlemek ve güncellemek istediğimde yeni bir tane oluşturmak gibi gerçekten çirkin şeyler yapmak istememe neden oluyor.

— morgancodes

10

Evet, pekala ... HTML, bir sayfada 3k satırı göstermek için oluşturulmadı :) Sayfalara ayrılmış bir çözüm düşünmüyor musunuz? Bu, çok daha hızlı hale getirir. Elbette daha fazla iş gerektirecek, ancak çok daha zengin bir kullanıcı deneyimi olacak.

— Seb

7

Bu güzel. Sorun şu ki bu tablo başlıklarını da kaldıracak.

— isuru

3

başlıkları kaldırır :(

— Sandeep Kushwah

6

Bu, başlıklar dahil olmak üzere tablodaki her şeyi kaldıracaktır. @Morgancodes'in başlıkları değil içeriği, yani satırları kaldırmak istediğini varsayıyorum. Bunu daha sonra bulanlar için çözüm olacaktır $('#mytable tbody').empty();. Bu, yalnızca gövdenin boşaltılmasını sağlar.

— OmniOwl

83

Herhangi bir döngüden kaçınmak daha iyidir, tüm öğeleri doğrudan şu şekilde kaldırın:

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

— Gradosevic
kaynak

6

html("")empty()dahili aramalar

— Emile Bergeron

8

Benim için güzel bir çözüm çünkü bir tablonun başlığını kaldırmıyor. Teşekkür ederim!

— Daria

@Daria seçicileri sonuna kadar kullanır, bu başlıklarınızı yerinde tutacaktır: $ ['table tbody']. Empty ();

— Dani

("#mytable> tbody") ve ("#mytable tbody") kullanmak arasındaki fark nedir.

— eaglei22

1

Tablonuzun bir satırında iç içe geçmiş bir tablonuz varsa, bu tbody etiketlerini de kaldırır. Tek bir masanız varsa, çok da farklı olmamalıdır.

— Shiroy

8

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

Başlıklara dokunmayacak.

— AlexCodeKeen
kaynak

7

Dekolmanı kullanmak, buradaki diğer yanıtlardan çok daha hızlıdır:

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

Detach çıkardığı için tbody elemanını masaya geri koymayı unutmayın:

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

Ayrıca, verimlilik $(target).find(child)sözdiziminin konuşulduğunda $(target > child). Neden? Cızırtı!

3.161 Tablo Satırı Boşaltmak İçin Geçen Süre

Detach () yöntemini kullanarak (yukarıdaki örneğimde gösterildiği gibi):

Firefox: 0.027s
Chrome: 0.027s
Kenar: 1.73s
IE11: 4.02s

Empty () yöntemini kullanarak:

Firefox: 0.055s
Chrome: 0.052s
Kenar: 137,99s (dondurulmuş da olabilir)
IE11: Donuyor ve asla geri dönmüyor

— Çizdi
kaynak

3

Burada görebildiğim iki konu:

JQuery'nin empty () ve remove () yöntemleri aslında oldukça fazla iş yapar. Nedenini öğrenmek için John Resig'in JavaScript İşlev Çağrısı Profiline bakın.
Diğer bir şey de, büyük miktarda tablo verisi için, verilerinizi sunucudan anında yüklemek, ağ çağrılarının sayısını artırmak, ancak bu çağrıların boyutunu azaltmak için mükemmel DataTables gibi bir datagrid kitaplığını düşünebilirsiniz . 1500 sıralı ve oldukça yavaş olan çok karmaşık bir tablom vardı, yeni AJAX tabanlı tabloya geçmek aynı verilerin oldukça hızlı görünmesini sağladı.

— Artlung
kaynak

Teşekkürler artlung. Aslında bunun gibi bir şey yapmak, sunucudan tüm verileri bir kerede almak, ancak yalnızca gerektiğinde tablo satırları çizmek.

— morgancodes

İyi bir arama gibi görünüyor. Bir tarayıcıdaki bir tablodaki satır sayısı konusunda endişelenmenin her zaman bir sorun olup olmayacağını veya çoğu bilgisayar için bellek arttıkça bu daha az sorun olur diye merak ediyorum.

— artlung

Bellek, yüklediğim veri miktarıyla ilgili bir sorun değil. Darboğaz, DOM manipülasyonudur.

— morgancodes

Sanırım aynı şeyi söylüyoruz. Ne kadar çok veri yüklerseniz, o kadar çok DOM düğümü yüklersiniz, bunlar benim için gerekli bellek açısından ilişkilidir. Umarım durumunuz ne olursa olsun iyileşmiştir.

— artlung

1

sadece hızlı kaldırmak istiyorsanız .. aşağıdaki gibi yapabilirsiniz ..

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

ancak tabloda bazı olaya bağlı öğeler olabilir,

bu durumda,

Yukarıdaki kod IE ... TT'de bellek sızıntısını engellemez ve FF'de hızlı değildir ...

afedersiniz....

0

bu benim için çalışıyor:

1- "removeRow" satırının her biri için sınıf ekleyin

2- jQuery'de

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

— Alsaket
kaynak

-2

Bunu deneyebilirsin ...

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

— Bilbo Waggins
kaynak