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:
let tds = document.querySelectorAll('#table td');
for (let td of tds) {
td.textContent = '!';
}
Stel dat er een HTML-tabel met getallen is en een knop. Verhoog bij het klikken op de knop het getal in elke cel van de tabel twee keer.
