Zmena buniek HTML tabuľky v JavaScripte

Nech je daná nejaká HTML tabuľka #table. Predpokladajme, že máme úlohu niečo urobiť s každou bunkou tabuľky, napríklad zapísať do každej z nich text '!'.

Poďme diskutovať o nuansách riešenia takejto úlohy.

Ako viete, HTML tabuľka má dvojrozmernú štruktúru: sú riadky a v nich bunky. Môžeme vyriešiť našu úlohu nasledovne: prechádzať cyklom riadky a v každom riadku prechádzať cyklom bunky a vykonať s nimi potrebnú akciu. To znamená, že uvedená schéma riešenia je podobná ako keby sme vytvárali takúto tabuľku, vyplňujúc ju riadkami a bunkami.

Avšak v tomto prípade budú dve vnorené slučky zbytočné: môžeme jednoducho získať všetky td a prechádzať ich cyklom, vykonávajúc potrebnú operáciu. Urobme to:

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

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

Nech je daná nejaká HTML tabuľka s číslami a tlačidlo. Po kliknutí na tlačidlo zvýšte číslo v každej bunke tabuľky na dvojnásobok.