Kujaza Jedwali la HTML Kwa Mtiririko

Wacha tuwe na jedwali tupu la HTML kama hili:

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

Wacha tujaze jedwali hili na seli na tufanye nambari katika seli hizo ziwe kutoka 1 hadi 9. Hapa kuna mfano wa kile tunachopaswa kupata:

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>

Wacha tuanze utekelezaji.

Kwanza kabisa, wacha tufanye jedwali la ukubwa 3 kwa 3, lijazwe kwa herufi '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);
}

Wacha sasa tufanye badala ya herufi 'x' kwenye seli ziandikwe nambari kwa kupanda.

Ili kufanya hivyo, ni lazima tuanzishe kihesabu kingine ambacho kitazidi thamani yake kwa mtiririko katika kila iteration ya kitanzi cha ndani, kama hivi:

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

let k = 1; // thamani ya mwanzo ya kihesabu
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; // tunaandika kihesabu kwenye seli
    k++; // tunaongeza kihesabu
    
    tr.appendChild(td);
  }
  
  table.appendChild(tr);
}