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

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

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

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

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

Это максимально быстро.

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

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

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

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

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

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

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

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

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

Затраченное время на очистку 3161 строки таблицы

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

• Firefox: 0,027 с.
• Хром: 0,027 с
• Edge: 1,73 с
• IE11: 4.02 с

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

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

Здесь я вижу две проблемы:

1. Методы jQuery empty () и remove () на самом деле выполняют довольно много работы. Почему см. « Профилирование вызовов функций JavaScript» Джона Ресига .

2. Другое дело, что для больших объемов табличных данных вы можете рассмотреть библиотеку DataGrid, такую ​​как отличные DataTables, чтобы загружать данные на лету с сервера, увеличивая количество сетевых вызовов, но уменьшая размер этих вызовов. У меня была очень сложная таблица с 1500 строками, которая становилась довольно медленной, переход на новую таблицу на основе AJAX заставил эти же данные казаться довольно быстрыми.

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

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

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

в таком случае,

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

извиняюсь....

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

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

2- в jQuery

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

Вы можете попробовать это ...

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