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:

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

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