Modificarea celulelor tabelului HTML cu JavaScript

Să presupunem că avem un tabel HTML #table. Sarcina noastră este să facem ceva cu fiecare celulă a tabelului, de exemplu, să scriem în fiecare dintre ele textul '!'.

Să discutăm nuanțele rezolvării acestei sarcini.

După cum știți, un tabel HTML are o structură bidimensională: există rânduri, iar în ele celule. Putem rezolva sarcina noastră în felul următor: parcurgem cu un ciclu rândurile și în fiecare rând parcurgem cu un ciclu celulele și facem cu ele acțiunea dorită. Adică schema descrisă este similară cu modul în care am crea un astfel de tabel, umplându-l cu rânduri și celule.

Cu toate acestea, în acest caz, două bucle imbricate ar fi redundante: putem obține pur și simplu toate td și le putem parcurge cu o buclă, efectuând operația necesară. Să facem acest lucru:

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

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

Să presupunem că avem un tabel HTML cu numere și un buton. La click pe buton, măriți numărul din fiecare celulă a tabelului de două ori.