Pengisian Berurutan Jadual HTML

Katakan kita mempunyai jadual HTML kosong seperti ini:

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

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

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

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

Tunjukkan pada skrin jadual HTML bersaiz 5 baris kali 5 lajur supaya dalam sel-selnya terdapat nombor secara berurutan dari 1 hingga 25.

Ubah suai tugas sebelumnya supaya dalam sel jadual ditulis nombor genap dalam julat dari 2 hingga 50.