HTML-taulukon solujen muuttaminen JavaScriptillä

Olkoon annettuna jokin HTML-taulukko #table. Oletetaan, että tehtävämme on tehdä jotain jokaisen taulukon solun kanssa, esimerkiksi kirjoittaa jokaiselle niistä teksti '!'.

Keskustellaan tällaisen tehtävän ratkaisun vivahteista.

Kuten tiedät, HTML-taulukolla on kaksiulotteinen rakenne: on rivejä, ja niissä soluja. Voimme ratkaista tehtävämme seuraavasti: käydä läpi silmukalla rivit ja jokaisessa rivissä käydä läpi solut silmukalla ja tehdä niille tarvittavan toimenpiteen. Eli esitetty ratkaisukaavio on samanlainen kuin miten loisisimme tällaista taulukkoa, täyttäen sen riveillä ja soluilla.

Kuitenkin tässä tapauksessa kaksi sisäkkäistä silmukkaa olisivat tarpeettomia: voimme yksinkertaisesti hankkia kaikki td ja käydä ne läpi silmukalla suorittaen tarvittavan operaation. Tehdään näin:

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

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

Olkoon annettuna jokin HTML-taulukko numeroilla ja painike. Painikkeen painalluksella kaksinkertaista luku jokaisessa taulukon solussa.