HTML tabeli lahtrite muutmine JavaScriptis

Olgu antud mingi HTML tabel #table. Eeldame, et meie ees seisab ülesanne teha midagi iga tabeli lahtriga, näiteks kirjutada igasse neist tekst '!'.

Arutleme sellise ülesande lahendamise nüansside üle.

Nagu te teate, on HTML tabelil kahemõõtmeline struktuur: on read ja nendes lahtrid. Me võime lahendada meie ülesande järgmiselt: tsükliga läbida read ja igas reas tsükliga läbida lahtrid ja teha nendega vajaliku tegevuse. See tähendab, et esitatud lahendusskeem on sarnane sellele, kuidas me looksime sellist tabelit, täites selle ridade ja lahtritega.

Siiski on sel juhul kaks pesastatud tsüklit liigsed: saame lihtsalt kõik td elemendid ja tsükliga läbida need, teostades vajaliku operatsiooni. Teeme selle:

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

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

Olgu antud mingi HTML tabel numbritega ja nupp. Nupu vajutamisel suurendage numbrit igas tabeli lahtris kahe korra.