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

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

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

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

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

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

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

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

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

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

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

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

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

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

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