Spreminjanje celic HTML tabele v JavaScriptu

Naj bo dana neka HTML tabela #table. Naj bo naša naloga narediti nekaj z vsako celico tabele, na primer, zapisati v vsako od njih besedilo '!'.

Razpravljajmo o niansah reševanja podobne naloge.

Kot veste, ima HTML tabela dvodimenzionalno strukturo: so vrstice in v njih celice. Lahko rešimo našo nalogo na naslednji način: z zanko prebrati vrstice in v vsaki vrstici z zanko prebrati celice in z njimi izvesti dejanje, ki ga potrebujemo. To pomeni, da je shema rešitve podobna temu, kako bi ustvarili takšno tabelo, ko jo zapolnjujemo z vrsticami in celicami.

Vendar sta v tem primeru dve gnezddeni zanki odveč: lahko preprosto dobimo vse td in jih preberemo z zanko, izvajajoč zahtevano operacijo. Naredimo to:

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

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

Naj bo dana neka HTML tabela s števili in gumb. Ob kliku na gumb povečajte število v vsaki celici tabele za dvakrat.