⊗jsPmPrTCF 469 of 505 menu

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.

azbydeenesfrkakkptruuz