Zmiana komórek tabeli HTML w JavaScript

Załóżmy, że mamy daną jakąś tabelę HTML #table. Załóżmy, że naszym zadaniem jest coś zrobić z każdą komórką tabeli, na przykład, wpisać do każdej z nich tekst '!'.

Omówmy niuanse rozwiązania tego typu zadania.

Jak wiesz, tabela HTML ma dwuwymiarową strukturę: są wiersze, a w nich komórki. Można rozwiązać nasze zadanie w następujący sposób: przejść pętlą po wierszach i w każdym wierszu przejść pętlą po komórkach i wykonać na nich potrzebną nam akcję. Czyli przedstawiony schemat rozwiązania jest podobny do tego, jak tworzylibyśmy taką tabelę, wypełniając ją wierszami i komórkami.

Jednakże, w tym przypadku, dwie zagnieżdżone pętle będą zbędne: można po prostu pobrać wszystkie td i przejść po nich pętlą, wykonując potrzebną operację. Zróbmy to:

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

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

Załóżmy, że mamy daną jakąś tabelę HTML z liczbami i przycisk. Po kliknięciu przycisku zwiększ liczbę w każdej komórce tabeli dwukrotnie.