Удаление всех строк в 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.