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:

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

Mari buat jadual di dalam div ini 3 pada 4:

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

Sekarang katakan kita diberikan dua div:

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

Mari buat jadual sendiri dalam setiap div ini:

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

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

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