HTML tabulas šūnu maiņa ar JavaScript

Lai ir dota kāda HTML tabula #table. Lai priekšā mums ir uzdevums kaut ko izdarīt ar katru tabulas šūnu, piemēram, ierakstīt katrā no tām tekstu '!'.

Apspriedīsim šāda uzdevuma risināšanas nianses.

Kā jūs zināt, HTML tabulai ir divdimensiju struktūra: ir rindas, un tajās šūnas. Var atrisināt mūsu uzdevumu šādi: iziet ciklā pa rindām un katrā rindā iziet ciklā pa šūnām un izdarīt ar tām vajadzīgo darbību. Tas ir, dotā risinājuma shēma ir līdzīga tam, kā mēs veidotu šādu tabulu, aizpildot to ar rindām un šūnām.

Tomēr šajā gadījumā divi ieguldītie cikli būtu lieki: var vienkārši iegūt visas td un iziet tās ciklā, veicot vajadzīgo operāciju. Darīsim tā:

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

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

Lai ir dota kāda HTML tabula ar skaitļiem un poga. Nospiežot pogu, palieliniet skaitli katrā tabulas šūnā divas reizes.