Промяна на клетки в HTML таблица с JavaScript

Нека е дадена някаква HTML таблица #table. Нека пред нас стои задачата да направим нещо с всяка клетка от таблицата, например, да запишем във всяка от тях текст '!'.

Нека обсъдим нюансите на решаването на подобна задача.

Както знаете, HTML таблицата има двумерна структура: има редове, а в тях клетки. Може да решим нашата задача по следния начин: да обходим в цикъл редовете и във всеки ред да обходим в цикъл клетките и да направим с тях нужното ни действие. Това означава, че дадената схема на решение е подобна на това как бихме създали такава таблица, попълвайки я с редове и клетки.

Въпреки това, в този случай, два вложени цикъла ще са излишни: може просто да получим всички td и да ги обходим в цикъл, изпълнявайки необходимата операция. Нека направим това:

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

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