Modifica delle celle di una tabella HTML con JavaScript
Sia data una tabella HTML #table.
Supponiamo di dover fare qualcosa
con ogni cella della tabella, ad esempio, scrivere
in ognuna di esse il testo '!'.
Discutiamo le sfumature della risoluzione di questo tipo di problema.
Come sapete, una tabella HTML ha una struttura bidimensionale: ci sono righe e in esse le celle. Si può risolvere il nostro problema nel modo seguente: iterare con un ciclo le righe e in ogni riga iterare con un ciclo le celle e fare con esse l'azione desiderata. Cioè lo schema di soluzione proposto è simile a come creeremmo una tale tabella, riempiendola con righe e celle.
Tuttavia, in questo caso, due cicli annidati
sarebbero superflui: si possono semplicemente ottenere tutti
i td e iterarli con un ciclo, eseguendo
l'operazione necessaria. Facciamolo:
let tds = document.querySelectorAll('#table td');
for (let td of tds) {
td.textContent = '!';
}
Sia data una tabella HTML con numeri e un pulsante. Alla pressione del pulsante, raddoppia il numero in ogni cella della tabella.
