0 added
0 removed
Original
2026-01-01
Modified
2026-02-26
1
<p>Рассмотрим два варианта решения. Первый простой - уберем все значения из таблицы. Второй - очистим только тэги .</p>
1
<p>Рассмотрим два варианта решения. Первый простой - уберем все значения из таблицы. Второй - очистим только тэги .</p>
2
<p>Исходный HTML файл</p>
2
<p>Исходный HTML файл</p>
3
<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><p>Сделаем границы в таблице видимыми</p>
3
<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><p>Сделаем границы в таблице видимыми</p>
4
table, td, th { /* Делаем границы аккуратными */ border: 1px solid; border-collapse: collapse; }<p>Первый вариант - удаляем всё. В раздел sсript страницы добавляем</p>
4
table, td, th { /* Делаем границы аккуратными */ border: 1px solid; border-collapse: collapse; }<p>Первый вариант - удаляем всё. В раздел sсript страницы добавляем</p>
5
const handlerAll = () => { const table = document.getElementById("data"); table.innerHTML = ''; }<p>Данный обработчик выбирает таблицу на странице и просто заменяет свойство innerHTML на пустую строку. Итог - таблица схлопнется.</p>
5
const handlerAll = () => { const table = document.getElementById("data"); table.innerHTML = ''; }<p>Данный обработчик выбирает таблицу на странице и просто заменяет свойство innerHTML на пустую строку. Итог - таблица схлопнется.</p>
6
<p>Но что если нам надо почистить только то, что в ячейках? Немного изменим логику, выберем все и уже у них заменим содержимое</p>
6
<p>Но что если нам надо почистить только то, что в ячейках? Немного изменим логику, выберем все и уже у них заменим содержимое</p>
7
const handler = () => { const allTd = document.getElementsByTagName("td"); for (let i = 0; i < allTd.length; i += 1) { allTd[i].innerHTML = ''; } }
7
const handler = () => { const allTd = document.getElementsByTagName("td"); for (let i = 0; i < allTd.length; i += 1) { allTd[i].innerHTML = ''; } }