HTML cədvəllərinin ardıcıl doldurulması

Tutaq ki, bizim belə boş bir HTML cədvəlimiz var:

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

Gəlin bu cədvəli xanalarla dolduraq və edək ki, bu xanalarda 1-dən 9-a qədər rəqəmlər olsun. Budur, bizim əldə etməli olduğumuz nəticənin nümunəsi:

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>

Gəlin realizasiyaya başlayaq.

Əvvəlcə gəlin sadəcə 3-ə 3 ölçülü, hər yerində 'x' hərfləri olan bir cədvəl edək:

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);
}

Gəlin indi elə edək ki, xanalarda 'x' hərfləri əvəzinə artan sıra ilə rəqəmlər yazılsın.

Bunun üçün bizə daxili dövrənin hər bir təkrarlanmasında ardıcıl olaraq dəyərlərini artıracaq başqa bir sayğac daxil etmək lazımdır, budur belə:

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

let k = 1; // sayğacın başlanğıc dəyəri
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; // sayğacı xanaya yazırıq
    k++; // sayğacı artırırıq
    
    tr.appendChild(td);
  }
  
  table.appendChild(tr);
}