HTML-tabelcellen wijzigen met JavaScript

Stel we hebben een HTML-tabel #table. Stel dat de taak is om iets te doen met elke cel van de tabel, bijvoorbeeld om in elk van hen de tekst '!' te schrijven.

Laten we de nuances van het oplossen van een dergelijke taak bespreken.

Zoals je weet, heeft een HTML-tabel een tweedimensionale structuur: er zijn rijen en daarin cellen. Men kan onze taak als volgt oplossen: doorloop met een lus de rijen en in elke rij doorloop met een lus de cellen en voer de gewenste actie ermee uit. Dat wil zeggen, het gegeven oplossingsschema is vergelijkbaar met hoe we zo'n tabel zouden creëren, door deze te vullen met rijen en cellen.

In dit geval zijn twee geneste lussen echter overbodig: men kan eenvoudig alle td ophalen en ze met een lus doorlopen, waarbij de benodigde operatie wordt uitgevoerd. Laten we dit doen:

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

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