Fungsi untuk Membuat Tabel HTML dalam JavaScript

Sekarang mari kita buat fungsi createTable, yang akan membuat tabel dengan ukuran tertentu dan menambahkannya ke akhir elemen yang ditentukan.

Biarkan parameter pertama fungsi kita menerima jumlah baris, parameter kedua - jumlah kolom, dan parameter ketiga - referensi ke elemen DOM, di dalam yang mana tabel kita akan dibuat.

Mari kita lihat bagaimana kita akan menggunakan fungsi yang dijelaskan ketika sudah dibuat. Misalnya, kita diberikan div seperti ini:

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

Mari kita buat tabel di dalam div ini 3 x 4:

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

Sekarang misalkan kita diberikan dua div:

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

Mari buat tabel masing-masing di setiap div ini:

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

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

Agar tabel yang dibuat langsung terlihat, Anda dapat menambahkan CSS, misalnya seperti ini:

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

Berikut adalah kerangka fungsi yang dijelaskan:

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

Lengkapi kode kerangka fungsi di atas . Uji fungsi yang sudah jadi.