⊗jsPmPrTCF 469 of 505 menu

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.

azbydeenesfrkakkptruuz