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