Modificando células de tabelas HTML com JavaScript
Suponha que tenhamos uma tabela HTML #table.
Suponha que nossa tarefa seja fazer algo
com cada célula da tabela, por exemplo, escrever
o texto '!' em cada uma delas.
Vamos discutir os detalhes para resolver essa tarefa.
Como você sabe, uma tabela HTML tem uma estrutura bidimensional: existem linhas e dentro delas existem células. Podemos resolver nossa tarefa da seguinte forma: percorrer as linhas com um loop e em cada linha percorrer as células com um loop e realizar a ação desejada com elas. Ou seja, o esquema descrito é semelhante à forma como criaríamos tal tabela, preenchendo-a com linhas e células.
No entanto, neste caso, dois loops aninhados
seriam desnecessários: podemos simplesmente obter todos
os td e percorrê-los com um loop, executando
a operação necessária. Vamos fazer isso:
let tds = document.querySelectorAll('#table td');
for (let td of tds) {
td.textContent = '!';
}
Suponha que tenhamos uma tabela HTML com números e um botão. Ao clicar no botão, dobre o número em cada célula da tabela.
