HTML жадвал ҳужайраларини JavaScriptда ўзгартириш

Бизга бирор HTML жадвал #table берилган бўлсин. Олдимизда ҳар бир ҳужайрага бирор иш бажариш вазифаси турибди, масалан, уларнинг ҳар бирига '!' матнини ёзиш.

Келинг, бунга ўхшаш масалани ечишнинг нуансларини муҳокама килайлик.

Ҳамма биласиз, HTML жадвал икки ўлчовли тузилишга эга: қаторлар ва уларнинг ичидаги ҳужайралар мавжуд. Биз масалани қуйидаги тарзда ечишимиз мумкин: цикл ёрдамида қаторларни айланиб чиқиш ва ҳар бир қатордаги ҳужайраларни цикл ёрдамида айланиб чиқиш ва уларга керакли амални бажариш. Яъни, келтирилган схема биз жадвални қаторлар ва ҳужайралар билан тўлдириб яратишганимизга ўхшайди.

Бирок, бу ҳолда, иккита ichki цикл ортқича бўлади: жуда оддийгина барча td ларни олиб, уларни цикл ёрдамида айланиб чиқиш, ва керакли операцияни бажариш мумкин. Буни амалга оширамиз:

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

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

Сонлар билан тўлдирилган бирор HTML жадвал ва тугма берилган бўлсин. Тугмани босганда жадвалнинг ҳар бир ҳужайрасидаги сонни икки баробарга оширинг.