Fungsi untuk Mencipta Jadual HTML dalam JavaScript

Sekarang mari kita buat fungsi createTable, yang akan mencipta jadual saiz yang ditentukan dan menambahkannya ke hujung elemen yang ditentukan.

Biarkan parameter pertama fungsi kita menerima bilangan baris, parameter kedua - bilangan lajur, dan parameter ketiga - rujukan kepada elemen DOM, di dalam yang jadual kita akan dicipta.

Mari kita lihat bagaimana kita akan menggunakan fungsi yang diterangkan, apabila ia telah dicipta. Sebagai contoh, katakan kita diberikan div seperti ini:

<div id="elem"></div>

Mari buat jadual di dalam div ini 3 pada 4:

let div = document.querySelector('#elem');
createTable(3, 4, div);

Sekarang katakan kita diberikan dua div:

<div id="elem1"></div>
<div id="elem2"></div>

Mari buat jadual sendiri dalam setiap div ini:

let div1 = document.querySelector('#elem1');
createTable(3, 4, div1);

let div2 = document.querySelector('#elem2');
createTable(5, 6, div2);

Untuk memastikan jadual yang dicipta serta-merta kelihatan, beberapa CSS boleh ditambah, contohnya, seperti ini:

td {
	width: 50px;
	height: 50px;
	border: 1px solid black;
}

Berikut adalah rangka fungsi yang diterangkan:

function createTable(rows, cols, parent) {
	let table = document.createElement('table');
	
	// di sini kita akan mencipta jadual dengan rows baris dan cols lajur
	for () {
		for () {
			
		}
	}
	
	parent.appendChild(table);
}

Sila lengkapkan kod rangka fungsi yang ditunjukkan di atas Uji fungsi siap.