HTML lentelių užpildymas

Tarkime, kad turime tokią tuščią HTML lentelę:

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

Užpildykime šią lentelę langeliais ir padarykime taip, kad šiuose languose būtų skaičiai nuo 1 iki 9. Štai pavyzdys, ką turėtume gauti:

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>

Pradėkime įgyvendinimą.

Pirmiausia tiesiog sukurkime lentelę dydžio 3 x 3, užpildytą raidėmis '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);
}

Dabar padarykime taip, kad vietoj raidžių 'x' langeliuose būtų skaičiai didėjimo tvarka.

Norėdami tai padaryti, turime įvesti dar vieną skaitiklį, kuris nuosekliai didins savo reikšmes kiekvienoje vidinio ciklo iteracijoje, štai taip:

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

let k = 1; // pradinė skaitiklio reikšmė
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; // įrašome skaitiklį į langelį
    k++; // didiname skaitiklį
    
    tr.appendChild(td);
  }
  
  table.appendChild(tr);
}