Preenchimento Sequencial de Tabelas HTML
Suponha que temos uma tabela HTML vazia como esta:
<table id="table"></table>
Vamos preencher esta tabela com células e fazer
com que nestas células tenhamos números de 1
a 9. Aqui está um exemplo do que devemos
obter:
<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>
Vamos começar a implementação.
Para começar, vamos simplesmente criar uma tabela
de tamanho 3 por 3, preenchida com
a letra '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);
}
Agora vamos fazer com que, em vez da
letra 'x', sejam escritos números
em ordem crescente nas células.
Para isso, precisamos introduzir outro contador, que aumentará sequencialmente seus valores em cada iteração do loop interno, assim:
let table = document.querySelector('#table');
let k = 1; // valor inicial do 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; // escrevemos o contador na célula
k++; // incrementamos o contador
tr.appendChild(td);
}
table.appendChild(tr);
}
Exiba na tela uma tabela HTML de tamanho
5 linhas por 5 colunas, de modo que
em suas células estejam sequencialmente os números
de 1 a 25.
Modifique a tarefa anterior para que
nas células da tabela estejam escritos os números pares
no intervalo de 2 a 50.