Ändern von HTML-Tabellenzellen mit JavaScript
Gegeben sei eine HTML-Tabelle #table.
Nehmen wir an, die Aufgabe besteht darin, etwas
mit jeder Zelle der Tabelle zu tun, zum Beispiel
in jede von ihnen den Text '!' zu schreiben.
Lassen Sie uns die Nuancen der Lösung einer solchen Aufgabe besprechen.
Wie Sie wissen, hat eine HTML-Tabelle eine zweidimensionale Struktur: Es gibt Zeilen und in ihnen Zellen. Man kann unsere Aufgabe wie folgt lösen: Durchlaufen Sie die Zeilen in einer Schleife und durchlaufen Sie in jeder Zeile in einer Schleife die Zellen und führen Sie die gewünschte Aktion mit ihnen aus. Das vorgegebene Lösungsschema ähnelt also dem, wie wir eine solche Tabelle erzeugen würden, indem wir sie mit Zeilen und Zellen füllen.
In diesem Fall wären jedoch zwei verschachtelte Schleifen
überflüssig: Man kann einfach alle
td abrufen und sie in einer Schleife durchlaufen, wobei
die erforderliche Operation ausgeführt wird. Machen wir das:
let tds = document.querySelectorAll('#table td');
for (let td of tds) {
td.textContent = '!';
}
Gegeben sei eine HTML-Tabelle mit Zahlen und ein Button. Bei Klick auf den Button sollen die Zahlen in jeder Zelle der Tabelle verdoppelt werden.
