Modificación de celdas de tabla HTML en JavaScript
Supongamos que tenemos una tabla HTML #table.
Imaginemos que tenemos la tarea de hacer algo
con cada celda de la tabla, por ejemplo, escribir
en cada una de ellas el texto '!'.
Analicemos los matices de resolver una tarea de este tipo.
Como sabes, una tabla HTML tiene una estructura bidimensional: hay filas y dentro de ellas celdas. Se puede resolver nuestra tarea de la siguiente manera: recorrer con un ciclo las filas y en cada fila recorrer con un ciclo las celdas y realizar con ellas la acción que necesitamos. Es decir, el esquema descrito es similar a cómo crearíamos dicha tabla, llenándola con filas y celdas.
Sin embargo, en este caso, dos ciclos anidados
serían superfluos: simplemente se pueden obtener todas las
td y recorrerlas con un ciclo, realizando
la operación requerida. Hagámoslo:
let tds = document.querySelectorAll('#table td');
for (let td of tds) {
td.textContent = '!';
}
Supongamos que tenemos una tabla HTML con números y un botón. Al hacer clic en el botón, duplique el número en cada celda de la tabla.
