Endring av HTML-tabellceller med JavaScript

La det være gitt en HTML-tabell #table. La oppgaven vår være å gjøre noe med hver celle i tabellen, for eksempel å skrive teksten '!' inn i hver av dem.

La oss diskutere nyansene ved løsning av en slik oppgave.

Som du vet, har en HTML-tabell en todimensjonal struktur: det er rader, og i dem celler. Man kan løse oppgaven vår på følgende måte: iterere gjennom radene med en løkke og i hver rad iterere gjennom cellene med en løkke og utføre den handlingen vi trenger med dem. Det vil si at den presenterte løsningsskjemaen ligner på hvordan vi ville opprettet en slik tabell, ved å fylle den med rader og celler.

Imidlertid, i dette tilfellet, vil to nestede løkker være overflødige: man kan ganske enkelt få alle td og iterere gjennom dem med en løkke, og utføre nødvendig operasjon. La oss gjøre dette:

javascriptlet tds = document.querySelectorAll('#table td');

for (let td of tds) {
  td.textContent = '!';
}