Zaporedno zapolnjevanje HTML tabel

Recimo, da imamo prazno HTML tabelo, kot je ta:

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

Zapolnimo to tabelo s celicami in naredimo tako, da so v teh celicah številke od 1 do 9. Tu je primer, kaj bi morali pridobiti:

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>

Pristopimo k implementaciji.

Za začetek preprosto naredimo tabelo velikosti 3 krat 3, zapolnjeno s črkami '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);
}

Sedaj naredimo tako, da se namesto črk 'x' v celice zapišejo številke v naraščajočem vrstnem redu.

Za to moramo vnesti še en števec, ki bo zaporedno povečeval svoje vrednosti v vsaki iteraciji notranje zanke, takole:

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

let k = 1; // začetna vrednost števca
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; // zapišemo števec v celico
    k++; // povečamo števec
    
    tr.appendChild(td);
  }
  
  table.appendChild(tr);
}