Llenado secuencial de tablas HTML
Supongamos que tenemos una tabla HTML vacía como esta:
<table id="table"></table>
Vamos a llenar esta tabla con celdas y hagamos
que en estas celdas aparezcan números del 1
al 9. Aquí un ejemplo de lo que deberíamos
obtener:
<table id="table">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
Empecemos con la implementación.
Para comenzar, simplemente hagamos una tabla
de tamaño 3 por 3, llena de
letras 'x':
let table = document.querySelector('#table');
for (let i = 0; i < 3; i++) {
let tr = document.createElement('tr');
for (let i = 0; i < 3; i++) {
let td = document.createElement('td');
td.textContent = 'x';
tr.appendChild(td);
}
table.appendChild(tr);
}
Ahora hagamos que en lugar de
letras 'x' en las celdas se escriban números
en orden ascendente.
Para esto necesitamos introducir otro contador, que incrementará secuencialmente sus valores en cada iteración del ciclo interno, así:
let table = document.querySelector('#table');
let k = 1; // valor inicial del contador
for (let i = 0; i < 3; i++) {
let tr = document.createElement('tr');
for (let i = 0; i < 3; i++) {
let td = document.createElement('td');
td.textContent = k; // escribimos el contador en la celda
k++; // incrementamos el contador
tr.appendChild(td);
}
table.appendChild(tr);
}
Muestre en pantalla una tabla HTML de tamaño
5 filas por 5 columnas, de modo que
en sus celdas aparezcan secuencialmente números
del 1 al 25.
Modifique la tarea anterior para que
en las celdas de la tabla estén escritos números pares
en el intervalo del 2 al 50.