Ändra HTML-tabellceller med JavaScript

Låt oss anta att det finns någon HTML-tabell #table. Låt oss anta att vi har uppgiften att göra något med varje cell i tabellen, till exempel skriva texten '!' i var och en av dem.

Låt oss diskutera nyanserna i att lösa en sådan uppgift.

Som ni vet har en HTML-tabell en tvådimensionell struktur: det finns rader och i dem celler. Man kan lösa vår uppgift på följande sätt: iterera genom raderna med en loop och i varje rad iterera genom cellerna med en loop och utföra den åtgärd vi behöver med dem. Det vill säga, det beskrivna lösningsschemat liknar hur vi skulle skapa en sådan tabell, och fylla den med rader och celler.

Men i det här fallet skulle två kapslade loopar vara överflödiga: man kan helt enkelt få alla td och iterera genom dem med en loop, och utföra den nödvändiga operationen. Låt oss göra det:

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

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

Låt oss anta att det finns en HTML-tabell med siffror och en knapp. Vid klick på knappen, fördubbla siffran i varje cell i tabellen.