HTML lentelės langelių keitimas JavaScript

Tegu yra tam tikra HTML lentelė #table. Tegu prieš mus yra uždavinys ką nors padaryti su kiekvienu lentelės langeliu, pavyzdžiui, įrašyti į kiekvieną iš jų tekstą '!'.

Aptarkime tokių užduočių sprendimo niuansus.

Kaip žinote, HTML lentelė turi dvimatę struktūrą: yra eilutės, o jose – langeliai. Galima išspręsti mūsų užduotį taip: ciklu pereiti per eilutes ir kiekvienoje eilutėje ciklu pereiti per langelius ir atlikti su jais mums reikalingą veiksmą. Tai yra, pateikta sprendimo schema panaši į tai, kaip mes kurtume tokią lentelę, užpildydami ją eilutėmis ir langeliais.

Tačiau šiuo atveju du įdėtieji ciklai bus pertekliniai: galima tiesiog gauti visus td ir pereiti juos ciklu, atliekant reikiamą operaciją. Padarykime tai:

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

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

Tegu yra tam tikra HTML lentelė su skaičiais ir mygtukas. Paspaudus mygtuką, padvigubinkite skaičių kiekviename lentelės langelyje.