Pengisian Berurutan Jadual HTML

Katakan kita mempunyai jadual HTML kosong seperti ini:

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

Mari kita isi jadual ini dengan sel dan buat supaya dalam sel-sel ini terdapat nombor dari 1 hingga 9. Berikut adalah contoh apa yang sepatutnya kita dapat:

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>

Mari kita mulakan pelaksanaannya.

Sebagai permulaan, mari kita buat jadual berukuran 3 kali 3, diisi dengan huruf '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);
}

Sekarang mari kita buat supaya bukannya huruf 'x', nombor yang menaik ditulis dalam sel.

Untuk ini, kita perlu memperkenalkan satu lagi pembilang, yang akan secara berurutan meningkatkan nilainya dalam setiap lelaran gelung dalaman, seperti ini:

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

let k = 1; // nilai awal pembilang
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; // tulis pembilang ke dalam sel
    k++; // tingkatkan pembilang
    
    tr.appendChild(td);
  }
  
  table.appendChild(tr);
}