Изменение ячеек HTML таблицы на JavaScript

Пусть дана некоторая HTML таблица #table. Пусть перед нами стоит задача что-то сделать с каждой ячейкой таблицы, например, записать в каждую из них текст '!'.

Давайте обсудим нюансы решения подобной задачи.

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

Однако, в данном случае, два вложенных цикла будут лишними: можно просто получить все td и перебрать их циклом, выполняя нужную операцию. Сделаем это:

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

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

Пусть дана некоторая HTML таблица с числами и кнопка. По нажатию на кнопку увеличьте число в каждой ячейки таблицы в два раза.