HTML táblázat celláinak módosítása JavaScripttel

Legyen adott egy HTML táblázat #table. Tegyük fel, hogy az a feladatunk, hogy valamit tegyünk minden egyes táblázat cellájával, például írjunk mindegyikbe a '!' szöveget.

Beszéljük meg egy ilyen feladat megoldásának nüanszait.

Mint tudjátok, a HTML táblázatnak kétdimenziós a szerkezete: vannak sorok, és azokban cellák. Lehetne megoldani a feladatunkat a következőképpen: végigmenni ciklussal a sorokon, és minden sorban végigmenni ciklussal a cellákon, majd elvégezni velük a kívánt műveletet. Azaz az említett megoldási séma hasonló ahhoz, mintha létrehoznánk a táblázatot, feltöltve azt sorokkal és cellákkal.

Azonban ebben az esetben két egymásba ágyazott ciklus felesleges: egyszerűen le lehet kérni az összes td elemet, és végigmenni rajtuk ciklussal, végrehajtva a szükséges műveletet. Tegyük ezt meg:

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

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

Legyen adott egy HTML táblázat számokkal és egy gomb. A gomb megnyomására növelje meg a táblázat minden cellájában lévő számot kétszeresére.