Логотип Хекслета
/
Вопросы и ответы
/
JavaScript
/

Как очистить таблицу js

Как очистить таблицу js

4 года назад

Человек-Молекула

Присоединяйтесь к нашему Telegram-сообществу

Ответы

0

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

Исходный 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 = '';
  }
}

3 года назад

Вячеслав Межуревский

Похожие вопросы