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

Question

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

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

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

Answer 1

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

Это так быстро, как вы получаете.

Answer 2

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

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

Answer 3

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

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

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

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

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

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

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

• Firefox: 0,027 с
• Chrome: 0,027 с
• Edge: 1,73 с
• IE11: 4,02

Использование метода empty ():

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

Answer 4

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

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

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

Answer 5

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

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

2- в jQuery

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

Answer 6

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

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

Answer 7

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

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

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

в этом случае

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

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