Secīga HTML tabulu aizpildīšana

Pieņemsim, ka mums ir šāda tukša HTML tabula:

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

Aizpildīsim šo tabulu ar šūnām un padarīsim tā, lai šajās šūnās būtu skaitļi no 1 līdz 9. Šeit ir piemērs tam, kas mums vajadzētu iegūt:

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>

Sāksim realizāciju.

Sākumā vienkārši izveidosim tabulu izmērā 3 uz 3, aizpildītu ar burtiem '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);
}

Tagad padarīsim tā, lai vietā burtiem 'x' šūnās tiktu ierakstīti skaitļi augošā secībā.

Lai to izdarītu, mums jāievēl vēl viens skaitītājs, kas secīgi palielinās savas vērtības katrā iekšējā cikla iterācijā, šādi:

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

let k = 1; // skaitītāja sākotnējā vērtība
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; // ierakstām skaitītāju šūnā
    k++; // palielinām skaitītāju
    
    tr.appendChild(td);
  }
  
  table.appendChild(tr);
}