HTML වගු අනුක්‍රමිකව පුරවා ගැනීම

අප සතුව මේ වගේ හිස් HTML වගුවක් ඇතැයි සිතන්න:

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

අපි මෙම වගුව කොටු වලින් පුරවා ගෙන, මෙම කොටුවල අංක 1 සිට 9 දක්වා යන ආකාරයට ලියන්නමු. අපට ලැබිය යුතු අවසාන ප්‍රතිඵලය මෙන්න:

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>

දැන් අපි ක්‍රියාත්මක කිරීමට පිවිසෙමු.

පළමුව, අපි සරලවම 3 පේළි හා 3 නැංගුරම් වලින් යුත් වගුවක් සාදමු. එය '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);
}

දැන්, අපි 'x' අකුර වෙනුවට කොටු වලට අංක අධිකරණය වන පරිදි ලියන්නේ කෙසේදැයි බලමු.

මේ සඳහා, අපට තවත් ගණකයක් හඳුන්වා දිය යුතුය. එය අභ්‍යන්තර ලූපයේ සෑම පුනරාවර්තනයකදීම අනුක්‍රමිකව අගය වැඩි කරයි, මේ ආකාරයට:

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

let k = 1; // ගණකයේ ආරම්භක අගය
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; // ගණකයේ අගය කොටුවට ලියන්න
    k++; // ගණකය වැඩි කරන්න
    
    tr.appendChild(td);
  }
  
  table.appendChild(tr);
}