Как удалить данные таблицы в HTML? - PullRequest
0 голосов
/ 02 мая 2020

Я хочу удалить данные, которые я поместил в ячейки таблицы. Я просто хочу удалить данные больше ничего, как я могу это сделать в HTML? Это моя таблица, и я хочу удалить данные из таблицы:

<table style="width:100%" style="height:10%" id="table1">
<tr id="vmi">
<td class="cella" id="tr0td1"></td>
<td class="cella" id="tr0td2"></td>
<td class="cella" id="tr0td3"></td>
<td class="cella" id="tr0td4"></td>
<td class="cella" id="tr0td5"></td>
</tr>
<tr>
<td class="cella" id="tr1td1"></td>
<td class="cella" id="tr1td2"></td>
<td class="cella" id="tr1td3"></td>
<td class="cella" id="tr1td4"></td>
<td class="cella" id="tr1td5"></td>
</tr>
<tr>
<td class="cella" id="tr2td1"></td>
<td class="cella" id="tr2td2"></td>
<td class="cella" id="tr2td3"></td>
<td class="cella" id="tr2td4"></td>
<td class="cella" id="tr2td5"></td>
</tr>
<tr>
<td class="cella" id="tr3td1"></td>
<td class="cella" id="tr3td2"></td>
<td class="cella" id="tr3td3"></td>
<td class="cella" id="tr3td4"></td>
<td class="cella" id="tr3td5"></td>
</tr>
<tr>
<td class="cella" id="tr4td1"></td>
<td class="cella" id="tr4td2"></td>
<td class="cella" id="tr4td3"></td>
<td class="cella" id="tr4td4"></td>
<td class="cella" id="tr4td5"></td>
</tr>
</table>

1 Ответ

3 голосов
/ 02 мая 2020

Вы можете использовать некоторый JavaScript код, такой как

[...document.querySelectorAll("#table1 td")].forEach(td=>td.innerHTML="")

. Это приведет к удалению всего содержимого из всех ячеек таблицы.

Если вы поместите такую ​​кнопку на своей странице

<button id="clrall">clear all cells</button>

Затем вы можете назначить действие этой кнопке с помощью

document.querySelector("#clrall").addEventListener("click",ev=>
[...document.querySelectorAll("#table1 td")].forEach(td=>td.innerHTML=""))

Если, с другой стороны, вы хотите удалить содержимое из отдельных ячеек, например той, на которую вы нажимаете затем вы можете сделать это, привязав соответствующий обработчик события щелчка к ячейкам таблицы.

document.querySelector("#table1")
.addEventListener("click",function(ev){
  if (ev.target.tagName=="TD") ev.target.innerHTML=""; 
})
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...