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

Question 1

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

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

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

Question 2

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

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

Question 3

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

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

Question 4

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

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

Question 5

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

$('#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: зависает и больше не возвращается

Question 6

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

Методы jQuery empty () и remove () на самом деле выполняют довольно много работы. Почему см. « Профилирование вызовов функций JavaScript» Джона Ресига .
Другое дело, что для больших объемов табличных данных вы можете рассмотреть библиотеку DataGrid, такую как отличные DataTables, чтобы загружать данные на лету с сервера, увеличивая количество сетевых вызовов, но уменьшая размер этих вызовов. У меня была очень сложная таблица с 1500 строками, которая становилась довольно медленной, переход на новую таблицу на основе AJAX заставил эти же данные казаться довольно быстрыми.

Question 7

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

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

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

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

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

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

Question 8

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

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

2- в jQuery

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

Question 9

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

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 1

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

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

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

Answer 2

217

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

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

Себ
источник

Хммм. Разочарование. Я бы подумал, что удаление будет намного быстрее, чем вставка. Это заставляет меня делать действительно уродливые вещи, например, просто скрывать таблицу и создавать новую, когда я хочу ее обновить.

morgancodes

10

Да, ну ... HTML не был создан для отображения 3k строк на странице :) Вы не можете придумать какое-либо решение с разбивкой на страницы? Это сделало бы это намного быстрее. Конечно, это потребует дополнительной работы, но это будет гораздо более удобное для пользователя взаимодействие.

Себ,

7

Это хорошо. Проблема в том, что это также удалит заголовки таблицы.

isuru 03

3

удаляет заголовки :(

Sandeep Kushwah 02

6

Это удалит все в таблице, включая заголовки. Я предполагаю, что @morgancodes хочет удалить содержимое, то есть строки, а не заголовки. Для тех, кто найдет это позже, решение будет $('#mytable tbody').empty();. Это гарантирует, что опорожняется только кузов.

OmniOwl

Answer 3

Хммм. Разочарование. Я бы подумал, что удаление будет намного быстрее, чем вставка. Это заставляет меня делать действительно уродливые вещи, например, просто скрывать таблицу и создавать новую, когда я хочу ее обновить.

morgancodes

Answer 4

10

Да, ну ... HTML не был создан для отображения 3k строк на странице :) Вы не можете придумать какое-либо решение с разбивкой на страницы? Это сделало бы это намного быстрее. Конечно, это потребует дополнительной работы, но это будет гораздо более удобное для пользователя взаимодействие.

Себ,

Answer 5

7

Это хорошо. Проблема в том, что это также удалит заголовки таблицы.

isuru 03

Answer 6

3

удаляет заголовки :(

Sandeep Kushwah 02

Answer 7

6

Это удалит все в таблице, включая заголовки. Я предполагаю, что @morgancodes хочет удалить содержимое, то есть строки, а не заголовки. Для тех, кто найдет это позже, решение будет $('#mytable tbody').empty();. Это гарантирует, что опорожняется только кузов.

OmniOwl

Answer 8

83

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

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

Градошевич
источник

6

html("")звонки empty()внутри

Эмиль Бержерон

8

Хорошее решение для меня, потому что оно не удаляет заголовок таблицы. Спасибо!

Дарья

@Daria использует селекторы в полной мере, это сохранит ваши заголовки на месте: $ ('table tbody'). Empty ();

Дэни

в чем разница между использованием ("#mytable> tbody") и ("#mytable tbody").

eaglei22

1

Если у вас есть вложенная таблица в строке вашей таблицы, она также удалит эти теги tbody. Если у вас всего одна таблица, она не должна сильно отличаться.

Shiroy

Answer 9

6

html("")звонки empty()внутри

Эмиль Бержерон

Answer 10

8

Хорошее решение для меня, потому что оно не удаляет заголовок таблицы. Спасибо!

Дарья

Answer 11

@Daria использует селекторы в полной мере, это сохранит ваши заголовки на месте: $ ('table tbody'). Empty ();

Дэни

Answer 12

в чем разница между использованием ("#mytable> tbody") и ("#mytable tbody").

eaglei22

Answer 13

1

Если у вас есть вложенная таблица в строке вашей таблицы, она также удалит эти теги tbody. Если у вас всего одна таблица, она не должна сильно отличаться.

Shiroy

Answer 14

8

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

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

AlexCodeKeen
источник

Answer 15

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

$('#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: зависает и больше не возвращается

Answer 16

3

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

Методы jQuery empty () и remove () на самом деле выполняют довольно много работы. Почему см. « Профилирование вызовов функций JavaScript» Джона Ресига .
Другое дело, что для больших объемов табличных данных вы можете рассмотреть библиотеку DataGrid, такую как отличные DataTables, чтобы загружать данные на лету с сервера, увеличивая количество сетевых вызовов, но уменьшая размер этих вызовов. У меня была очень сложная таблица с 1500 строками, которая становилась довольно медленной, переход на новую таблицу на основе AJAX заставил эти же данные казаться довольно быстрыми.

Artlung
источник

Спасибо artlung. На самом деле делать что-то вроде этого, получать все данные сразу с сервера, но только рисовать строки таблицы, когда это необходимо.

morgancodes

Звучит как хороший звонок. Мне интересно, всегда ли будет проблемой беспокоиться о количестве строк в таблице в браузере, или, если объем памяти для большинства компьютеров увеличится, это станет меньшей проблемой.

artlung

Память не проблема с объемом загружаемых данных. Узелка - это манипуляции с DOM.

morgancodes

Я думаю, мы говорим то же самое. Чем больше данных вы загружаете, тем больше узлов DOM загружаете, для меня они связаны с точки зрения необходимой памяти. Я надеюсь, что твоя ситуация в любом случае улучшилась.

artlung

Answer 17

Спасибо artlung. На самом деле делать что-то вроде этого, получать все данные сразу с сервера, но только рисовать строки таблицы, когда это необходимо.

morgancodes

Answer 18

Звучит как хороший звонок. Мне интересно, всегда ли будет проблемой беспокоиться о количестве строк в таблице в браузере, или, если объем памяти для большинства компьютеров увеличится, это станет меньшей проблемой.

artlung

Answer 19

Память не проблема с объемом загружаемых данных. Узелка - это манипуляции с DOM.

morgancodes

Answer 20

Я думаю, мы говорим то же самое. Чем больше данных вы загружаете, тем больше узлов DOM загружаете, для меня они связаны с точки зрения необходимой памяти. Я надеюсь, что твоя ситуация в любом случае улучшилась.

artlung

Answer 21

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

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

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

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

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

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

Answer 22

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

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

2- в jQuery

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

Answer 23

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

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

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

Ответы: