Как очистить таблицу js — Q&A Хекслет
2026-02-26 19:52 Diff
https://ru.hexlet.io/qna/javascript/questions/kak-ochistit-tablitsu-js

Рассмотрим два варианта решения. Первый простой - уберем все значения из таблицы. Второй - очистим только тэги .

Исходный HTML файл

<table id="data"> <thead> <tr> <th>Chair</th> <th>The Laid back</th> <th>The Worker Bee</th> <th>The Chair 4/2</th> </tr> </thead> <tbody> <tr> <th>Width</th> <td>30 cm</td> <td>20 cm</td> <td>80 cm</td> </tr> <tr> <th>Heigth</th> <td>80 cm</td> <td>40 cm</td> <td>60 cm</td> </tr> </tbody> </table> <button onclick="handlerAll();">Удалить все значения</button> <button onclick="handler();">Удалить значения в ячейках</button>

Сделаем границы в таблице видимыми

table, td, th { /* Делаем границы аккуратными */ border: 1px solid; border-collapse: collapse; }

Первый вариант - удаляем всё. В раздел sсript страницы добавляем

const handlerAll = () => { const table = document.getElementById("data"); table.innerHTML = ''; }

Данный обработчик выбирает таблицу на странице и просто заменяет свойство innerHTML на пустую строку. Итог - таблица схлопнется.

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

const handler = () => { const allTd = document.getElementsByTagName("td"); for (let i = 0; i < allTd.length; i += 1) { allTd[i].innerHTML = ''; } }