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

Jawaban:

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:

  1. Metode empty () dan remove () dari jQuery sebenarnya melakukan cukup banyak pekerjaan. Lihat Profil Panggilan Fungsi JavaScript John Resig untuk mengetahui alasannya.

  2. 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....


sumber
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