Удаление всех строк в HTML-таблице JS без заморозки UI

Быстрый ответ

Для очистки вашей HTML-таблицы от всех строк можно использовать следующий JavaScript-фрагмент:

let table = document.querySelector('table');
while (table.rows.length) {
  table.deleteRow(0); // Прощаемся с первой строкой!
}

Представленный скрипт обнаруживает первую таблицу <table> на странице и с помощью цикла while удаляет все строки, начинающ с верхней, до тех пор, пока таблица не станет пустой. Это эффективный и быстрый способ очистки таблицы.

Жажда скорости: трюк с <tbody>

Если заменить <tbody>, процесс удаления строк из таблицы станет молниеносным, особенно когда в таблице много данных и необходимо улучшить производительность:

let table = document.getElementById('myTable'); // Привет, таблица!
let newTbody = document.createElement('tbody'); // Вот ты новый и чистый
table.replaceChild(newTbody, table.getElementsByTagName('tbody')[0]); // Меняемся!

Таким образом, заменяя старый <tbody> на новый, мы не только сохраняем структуру таблицы, но и значительно увеличиваем скорость удаления строк по сравнению с построчным удалением.

Сохранение заголовков как остатки Титаника

Если у вашей таблицы есть изысканные заголовки столбцов (<th>), которые необходимо сохранить при очистке таблицы, вы можете продолжать следующим образом:

let tbody = document.querySelector('table tbody');
tbody.innerHTML = ''; // Почистим и освободим!

Таким образом, заголовки, обычно находящиеся в <thead>, останутся нетронутыми, а <tbody> будет очищен в считанные секунды и готов к заполнению новыми данными.

Укрощение непослушных: Работа с динамичными таблицами

Если таблица постоянно обновляется, а именно добавляются или удаляются строки, подсчет строк (rowCount) пригодится:

let table = document.getElementById('dynamicTable'); // Каждому столу свое имя!
for (let i = table.rows.length – 1; i >= 0; i--) {
    table.deleteRow(i); // Помалу прощаемся со строками...
}

Использование обратного цикла позволяет удалить все строки, не упустив при этом ни одной из них.

Пути решения возможных проблем

Таблица слишком большая? Спокойствие, только спокойствие и манипулирование DOM!

Если удаление строк из большой таблицы замедляет исполнение кода, можно попробовать следующее:

• Обновите <tbody>, вместо того чтобы удалять каждую строку по отдельности.
• Используйте асинхронный код с setTimeout или requestAnimationFrame, чтобы приложение не "зависало".

Подробнее об этом расскажет наш спикер на видео

Важность наличия идентификатора таблицы

Если на странице множество таблиц, для быстрого поиска нужной таблицы стоит использовать id:

let specificTable = document.getElementById('specificTable'); // Ее мы и искали!
specificTable.querySelector('tbody').innerHTML = ''; // И теперь она чиста!

Разумный выбор подхода

Подходы к очистке таблицы могут варьироваться в зависимости от сложности задачи:

• Для небольших таблиц использование innerHTML для очистки является быстрым решением.
• Для больших и динамичных таблиц оптимальнее использовать цикл с deleteRow() или замену целиком tbody.

Полезные материалы

1. <table>: Элемент таблицы — Подробное описание таблиц от MDN.
2. Удаление строки из таблицы с помощью JavaScript — Популярная тема на StackOverflow о том, как удалять строки.
3. Полное руководство по элементу таблицы — Руководство CSS-Tricks по верстке таблиц.
4. Изменение документа — Базовое руководство по манипуляциям с DOM на JavaScript.info.
5. .remove() — Метод удаления элементов с примерами от jQuery.
6. Метод Document: querySelector() — Сведения от MDN о querySelector.
7. HTML DOM Table deleteRow() Method — Изучение метода удаления строк таблицы на сайте W3Schools.