jquery - cara tercepat untuk menghapus semua baris dari tabel yang sangat besar

93

Saya pikir ini mungkin cara cepat untuk menghapus isi tabel yang sangat besar (3000 baris):

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

Tapi butuh sekitar lima detik untuk menyelesaikannya di firefox. Apakah saya melakukan sesuatu yang bodoh (selain mencoba memuat 3000 baris ke dalam browser)? Apakah ada cara yang lebih cepat untuk melakukannya?

javascript jquery dom

— kamar mayat
sumber

213

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

Itu secepat yang Anda dapatkan.

— Seb
sumber

Hmmm. Membuat frustrasi. Menurut saya, menghapus akan jauh lebih cepat daripada penyisipan. Jenis membuat saya ingin melakukan hal-hal yang sangat buruk seperti menyembunyikan tabel dan membuat yang baru ketika saya ingin memperbaruinya.

— morgancodes

10

Yeah, well ... HTML tidak dibuat untuk menampilkan 3k baris dalam satu halaman :) Tidak bisakah Anda memikirkan solusi paginasi? Itu akan membuatnya lebih cepat. Tentu itu akan menuntut lebih banyak pekerjaan, tetapi itu akan menjadi pengalaman pengguna yang jauh lebih kaya.

— Seb

7

Yang ini bagus. Masalahnya adalah ini juga akan menghapus header tabel.

— isuru

3

menghapus header :(

— Sandeep Kushwah

5

Ini akan menghapus semua yang ada di tabel, termasuk header. Saya berasumsi bahwa @morgancodes ingin menghapus isinya, alias baris, bukan header. Bagi mereka yang menemukan ini nanti, solusinya adalah $('#mytable tbody').empty();. Ini memastikan bahwa hanya tbody yang dikosongkan.

— OmniOwl

82

Lebih baik hindari jenis loop apa pun, cukup hapus semua elemen secara langsung seperti ini:

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

— gradosevic
sumber

6

html("")panggilan empty()internal

— Emile Bergeron

8

Solusi bagus untuk saya karena tidak menghapus header tabel. Terima kasih!

— Daria

@Daria menggunakan penyeleksi secara maksimal, ini akan membuat header Anda tetap di tempatnya: $ ('table tbody'). Empty ();

— Dani

apa perbedaan antara menggunakan ("#mytable> tbody") dan ("#mytable tbody").

— eaglei22

1

Jika Anda memiliki tabel bersarang di baris tabel Anda, itu juga akan menghapus tag tbody tersebut. Jika Anda hanya memiliki satu tabel, seharusnya tidak jauh berbeda.

— Shiroy

6

Menggunakan detach jauh lebih cepat daripada jawaban lain di sini:

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

Jangan lupa untuk mengembalikan elemen tbody ke dalam tabel karena melepaskannya:

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

Juga perhatikan bahwa ketika berbicara $(target).find(child)sintaks efisiensi lebih cepat dari $(target > child). Mengapa? Mendesis!

Waktu yang Berlalu untuk Mengosongkan 3.161 Baris Tabel

Menggunakan metode Detach () (seperti yang ditunjukkan dalam contoh saya di atas):

Firefox: 0,027
Chrome: 0,027
Tepi: 1.73s
IE11: 4.02s

Menggunakan metode empty ():

Firefox: 0,055 dtk
Chrome: 0,052 dtk
Edge: 137,99s (mungkin juga dibekukan)
IE11: Macet dan tidak pernah kembali

— Drew
sumber

5

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

Ini tidak akan menyentuh header.

— AlexCodeKeen
sumber

3

Dua masalah yang saya lihat di sini:

Metode empty () dan remove () dari jQuery sebenarnya melakukan cukup banyak pekerjaan. Lihat Profil Panggilan Fungsi JavaScript John Resig untuk mengetahui alasannya.
Hal lainnya adalah bahwa untuk data tabular dalam jumlah besar Anda mungkin mempertimbangkan pustaka datagrid seperti DataTables yang sangat baik untuk memuat data Anda dengan cepat dari server, meningkatkan jumlah panggilan jaringan, tetapi mengurangi ukuran panggilan tersebut. Saya memiliki tabel yang sangat rumit dengan 1500 baris yang menjadi sangat lambat, mengubah ke tabel berbasis AJAX baru membuat data yang sama ini tampak agak cepat.

— artlung
sumber

Terima kasih artlung. Melakukan sesuatu seperti itu sebenarnya, mendapatkan semua data sekaligus dari server, tetapi hanya menggambar baris tabel saat diperlukan.

— morgancodes

Kedengarannya seperti panggilan yang bagus. Saya bertanya-tanya apakah mengkhawatirkan jumlah baris dalam tabel di browser akan selalu menjadi masalah, atau jika memori untuk sebagian besar komputer naik, ini tidak akan menjadi masalah.

— artlung

Memori bukanlah masalah dengan jumlah data yang saya muat. Penghambatnya adalah manipulasi DOM.

— morgancodes

Saya pikir kami mengatakan hal yang sama. Semakin banyak data yang Anda muat, semakin banyak node DOM yang Anda muat, bagi saya ini terkait dalam hal memori yang dibutuhkan. Saya harap situasi Anda membaik, bagaimanapun juga.

— artlung

1

jika Anda ingin menghapus hanya dengan cepat .. Anda dapat melakukan seperti di bawah ini ..

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

tetapi, mungkin ada beberapa elemen yang terikat peristiwa di tabel,

dalam hal itu,

kode di atas tidak mencegah kebocoran memori di IE ... TT dan tidak cepat di FF ...

Maaf....

0

ini berhasil untuk saya:

1- tambahkan kelas untuk setiap baris "removeRow"

2- di jQuery

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

— Alsaket
sumber

-2

Anda bisa mencoba ini ...

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
sumber