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:
let tds = document.querySelectorAll('#table td');
for (let td of tds) {
td.textContent = '!';
}
La det være gitt en HTML-tabell med tall og en knapp. Ved klikk på knappen, øk tallet i hver celle i tabellen to ganger.
