Preenchimento Sequencial de Tabelas HTML

Suponha que temos uma tabela HTML vazia como esta:

html<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:

html<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':

javascriptlet 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:

javascriptlet 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);
}