Změna buněk HTML tabulky v JavaScriptu

Nechť je dána nějaká HTML tabulka #table. Předpokládejme, že máme za úkol něco udělat s každou buňkou tabulky, například zapsat do každé z nich text '!'.

Pojďme probrat nuance řešení podobného úkolu.

Jak víte, HTML tabulka má dvourozměrnou strukturu: existují řádky a v nich buňky. Lze náš úkol vyřešit následujícím způsobem: procházet cyklem řádky a v každém řádku procházet cyklem buňky a provést s nimi akci, kterou potřebujeme. To znamená, že uvedené schéma řešení je podobné tomu, jako bychom vytvářeli takovou tabulku, naplňovali ji řádky a buňkami.

Avšak v tomto případě budou dvě vnořené smyčky zbytečné: lze jednoduše získat všechny td a procházet je cyklem, provádějíce požadovanou operaci. Udělejme to:

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

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

Nechť je dána nějaká HTML tabulka s čísly a tlačítko. Po stisknutí tlačítka zdvojnásobte číslo v každé buňce tabulky.