Izmena ćelija HTML tabele u JavaScript-u

Neka je data neka HTML tabela #table. Neka je pred nama zadatak da nešto uradimo sa svakom ćelijom tabele, na primer, da zapišemo u svaku od njih tekst '!'.

Hajde da razgovaramo o nijansama rešenja sličnog zadatka.

Kao što znate, HTML tabela ima dvodimenzionalnu strukturu: postoje redovi, a u njima ćelije. Može se rešiti naš zadatak na sledeći način: preći ciklom redove i u svakom redu preći ciklom ćelije i uraditi sa njima radnju koja nam je potrebna. To jest, data shema rešenja je slična tome kako bismo mi kreirali takvu tabelu, popunjavajući je redovima i ćelijama.

Međutim, u ovom slučaju, dva ugnježdena ciklusa bi bila suvišna: može se jednostavno dobiti sve td i preći ih ciklom, izvršavajući potrebnu operaciju. Hajde da to uradimo:

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

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

Neka je data neka HTML tabela sa brojevima i dugme. Klikom na dugme, uvećajte broj u svakoj ćeliji tabele dva puta.