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:

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

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