Ændring af HTML-tabelceller med JavaScript

Lad der være givet en HTML-tabel #table. Lad opgaven være at gøre noget med hver celle i tabellen, for eksempel at skrive teksten '!' i hver af dem.

Lad os drøfte nuancerne ved løsning af en sådan opgave.

Som du ved, har en HTML-tabel en todimensional struktur: der er rækker, og i dem celler. Man kan løse vores opgave på følgende måde: gennemgå rækkerne med en løkke og i hver række gennemgå cellerne med en løkke og udføre den nødvendige handling på dem. Det vil sige, den anførte løsningsskema ligner hvordan vi ville oprette en sådan tabel, ved at udfylde den med rækker og celler.

Dog vil to indlejrede løkker i dette tilfælde være overflødige: man kan simpelthen hente alle td og gennemgå dem med en løkke, mens man udfører den nødvendige operation. Lad os gøre dette:

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

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