Jquery - самый быстрый способ удалить все строки из очень большой таблицы

Я думал, что это может быть быстрый способ удалить содержимое очень большой таблицы (3000 строк):

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

Но это займет около пяти секунд, чтобы закончить в firefox. Я делаю что-то немое (кроме попытки загрузить 3000 строк в браузер)? Есть ли более быстрый способ сделать это?

Ответ 1

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

Это так же быстро, как и вы.

Ответ 2

Лучше избегать любых циклов, просто удалите все элементы прямо следующим образом:

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

Ответ 3

Использование detach намного быстрее, чем любой другой ответ здесь:

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

Не забудьте положить элемент tbody обратно в таблицу, так как detach удалил его:

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

Также обратите внимание, что при эффективности $(target).find(child) синтаксис $(target).find(child) работает быстрее, чем $(target > child). Зачем? Sizzle!

Истекшее время для опустошения 3 161 строки таблицы

Используя метод Detach() (как показано в моем примере выше):

Firefox: 0,027 с
Хром: 0,027 с
Край: 1,73 с
IE11: 4.02 с

Используя метод empty():

Firefox: 0,055 с
Хром: 0,052 с
Edge: 137,99 (может быть заморожен)
IE11: зависает и никогда не возвращается

Ответ 4

Два вопроса, которые я вижу здесь:

Пустые() и remove() методы jQuery на самом деле выполняют небольшую работу. См. John Resig Функция JavaScript для профилирования вызовов для чего.
Другое дело, что для большого количества табличных данных вы можете рассмотреть библиотеку datagrid, такую как отличный DataTables загружать данные "на лету" с сервера, увеличивая количество сетевых вызовов, но уменьшая размер этих вызовов. У меня была очень сложная таблица с 1500 строками, которые были довольно медленными, переход на новую таблицу на основе AJAX заставил эти же данные выглядеть довольно быстро.

Ответ 5

если вы хотите удалить только быстро.. вы можете сделать, как показано ниже.

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

но в таблице могут быть некоторые связанные с событием элементы,

в этом случае

выше код не предотвращает утечку памяти в IE... T-T и не быстро в FF...

извините....

Ответ 6

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

Это не коснется заголовков.

Ответ 7

это работает для меня:

1- добавить класс для каждой строки "removeRow"

2- в jQuery

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

Ответ 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);
}