ฟังก์ชันสำหรับสร้างตาราง HTML ใน JavaScript

ตอนนี้เรามาสร้างฟังก์ชัน createTable กัน ซึ่งจะสร้างตารางตามขนาดที่กำหนด และเพิ่มลงในส่วนท้ายขององค์ประกอบที่กำหนด

ให้พารามิเตอร์แรกของฟังก์ชันของเรารับ จำนวนแถว พารามิเตอร์ที่สอง - จำนวน คอลัมน์ และพารามิเตอร์ที่สาม - ลิงก์ไปยังองค์ประกอบ DOM ภายใน ซึ่งตารางของเราจะถูกสร้างขึ้น

มาดูกันว่าเราจะใช้ ฟังก์ชันที่อธิบายไว้อย่างไร เมื่อมันถูกสร้างขึ้น สมมติว่า ตัวอย่างเช่น เรามี div ดังนี้:

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

มาสร้างตารางภายใน div นี้กัน ขนาด 3 คูณ 4:

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

ตอนนี้สมมติว่าเรามี div สองอัน:

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

มาสร้างตารางของตัวเองในแต่ละ div เหล่านี้กัน:

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

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

เพื่อให้ตารางที่สร้างขึ้น มองเห็นได้ทันที เราสามารถเพิ่ม CSS บางอย่างได้ เช่น แบบนี้:

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

นี่คือโครงร่างของฟังก์ชันที่อธิบายไว้:

function createTable(rows, cols, parent) {
	let table = document.createElement('table');
	
	// ที่นี่เราจะสร้างตารางที่มี rows แถวและ cols คอลัมน์
	for () {
		for () {
			
		}
	}
	
	parent.appendChild(table);
}

กรุณาเขียนโค้ดต่อจากโครงร่างฟังก์ชัน ที่แสดงไว้ด้านบน ทดสอบการทำงานของฟังก์ชันที่เสร็จสมบูรณ์