Pengisian Berurutan Tabel HTML

Misalkan kita memiliki tabel HTML kosong seperti ini:

<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:

<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':

let 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:

let 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);
}

Tampilkan di layar tabel HTML berukuran 5 baris kali 5 kolom, sehingga di dalam sel-selnya berisi angka secara berurutan dari 1 sampai 25.

Modifikasi tugas sebelumnya sehingga di dalam sel tabel tertulis angka genap dalam rentang dari 2 sampai 50.