Remplissage séquentiel de tableaux HTML

Supposons que nous ayons un tableau HTML vide comme celui-ci :

html<table id="table"></table>

Remplissons ce tableau avec des cellules et faisons en sorte que les nombres de 1 à 9 apparaissent dans ces cellules. Voici un exemple de ce que nous devrions obtenir :

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>

Passons à la mise en œuvre.

Pour commencer, créons simplement un tableau de taille 3 par 3, rempli de lettres '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);
}

Faisons maintenant en sorte qu'au lieu de lettres 'x', les nombres soient écrits dans les cellules par ordre croissant.

Pour ce faire, nous devons introduire un autre compteur qui augmentera séquentiellement ses valeurs à chaque itération de la boucle interne, comme ceci :

javascriptlet table = document.querySelector('#table');

let k = 1; // valeur initiale du compteur
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; // écrivons le compteur dans la cellule
    k++; // incrémentons le compteur
    
    tr.appendChild(td);
  }
  
  table.appendChild(tr);
}