Промяна на клетки в HTML таблица с JavaScript
Нека е дадена някаква HTML таблица #table.
Нека пред нас стои задачата да направим нещо
с всяка клетка от таблицата, например, да запишем
във всяка от тях текст '!'.
Нека обсъдим нюансите на решаването на подобна задача.
Както знаете, HTML таблицата има двумерна структура: има редове, а в тях клетки. Може да решим нашата задача по следния начин: да обходим в цикъл редовете и във всеки ред да обходим в цикъл клетките и да направим с тях нужното ни действие. Това означава, че дадената схема на решение е подобна на това как бихме създали такава таблица, попълвайки я с редове и клетки.
Въпреки това, в този случай, два вложени цикъла
ще са излишни: може просто да получим всички
td и да ги обходим в цикъл, изпълнявайки
необходимата операция. Нека направим това:
let tds = document.querySelectorAll('#table td');
for (let td of tds) {
td.textContent = '!';
}
Нека е дадена някаква HTML таблица с числа и бутон. При натискане на бутона увеличете числото във всяка клетка от таблицата два пъти.
