Opeenvolgende vulling van HTML-tabellen

Stel we hebben een lege HTML-tabel zoals deze:

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

Laten we deze tabel vullen met cellen en ervoor zorgen dat in deze cellen nummers van 1 tot 9 staan. Hier is een voorbeeld van wat we moeten bereiken:

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>

Laten we beginnen met de implementatie.

Laten we eerst een tabel maken met formaat 3 bij 3, gevuld met de letter '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);
}

Laten we nu ervoor zorgen dat in plaats van de letter 'x' in de cellen, oplopende nummers worden geschreven.

Hiervoor moeten we nog een teller introduceren, die opeenvolgend zijn waarden zal verhogen in elke iteratie van de innerlijke lus, zoals hier:

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

let k = 1; // startwaarde van de teller
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; // schrijf de teller in de cel
    k++; // verhoog de teller
    
    tr.appendChild(td);
  }
  
  table.appendChild(tr);
}