Pengisian Berurutan Tabel HTML

Misalkan kita memiliki tabel HTML kosong seperti ini:

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

Mari kita isi tabel ini dengan sel dan buat sehingga dalam sel-sel tersebut berisi angka dari 1 sampai 9. Berikut contoh yang harus kita hasilkan:

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 mulai implementasinya.

Untuk awal, mari kita buat tabel 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 ubah sehingga alih-alih huruf 'x', yang ditulis dalam sel adalah angka secara menaik.

Untuk ini, kita perlu memperkenalkan sebuah penghitung lain, yang akan secara berurutan menaikkan nilainya di setiap iterasi dari loop dalam, seperti ini:

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

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