Plotësimi Sequential i Tabelave HTML

Le të themi se kemi një tabelë HTML të zbrazët si kjo:

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

Le ta plotësojmë këtë tabelë me qeliza dhe ta bëjmë në mënyrë që në këto qeliza të shkojnë numrat nga 1 në 9. Këtu është një shembull i asaj që duhet të përftojmë:

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>

Le të fillojmë zbatimin.

Për fillim, le të bëjmë një tabelë me përmasa 3 me 3, të plotësuar me shkronjat '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);
}

Tani le ta bëjmë në mënyrë që në vend të shkronjave 'x' në qeliza të regjistrohen numrat në rend rritës.

Për këtë, ne duhet të prezantojmë një numërues tjetër, i cili do të rrisë në mënyrë sekuenciale vlerat e tij në çdo përsëritje të lakut të brendshëm, si kjo:

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

let k = 1; // vlera fillestare e numëruesit
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; // regjistrojmë numëruesin në qelizë
    k++; // rrisim numëruesin
    
    tr.appendChild(td);
  }
  
  table.appendChild(tr);
}