Bagaimana untuk Mencipta Jadual Kompleks dengan Rowspan dan Cellspan yang berbeza dalam JavaScript?

Mencipta Jadual Kompleks Menggunakan JavaScript

Dalam JavaScript, fungsi tableCreate() menjana jadual mudah dengan dua baris dan dua sel. Walau bagaimanapun, ia boleh diubah suai untuk mencipta jadual yang lebih rumit, seperti yang disediakan.

Untuk mencapai ini, ubah suai gelung for dalam fungsi dan gunakan kaedah insertRow dan insertCell dan bukannya mencipta elemen secara manual. Berikut ialah kod yang dikemas kini:

<code class="js">function tableCreate() {
  const body = document.body,
        tbl = document.createElement('table');
  tbl.style.width = '100px';
  tbl.style.border = '1px solid black';

  for (let i = 0; i < 3; i++) {
    const tr = tbl.insertRow();
    for (let j = 0; j < 2; j++) {
      if (i === 2 & j === 1) {
        break;
      } else {
        const td = tr.insertCell();
        td.appendChild(document.createTextNode(`Cell I${i}/J${j}`));
        td.style.border = '1px solid black';
        if (i === 1 & j === 1) {
          td.setAttribute('rowSpan', '2');
        }
      }
    }
  }
  body.appendChild(tbl);
}

tableCreate();</code>

Kod yang diubah suai ini menghasilkan jadual dengan tiga baris dan dua sel, dengan sel kedua merangkumi dua baris. Ia menggunakan CSS untuk menetapkan lebar dan sempadan jadual. Ambil perhatian bahawa atribut rowSpan ditambahkan pada sel bersilang untuk menentukan bahawa ia harus menjangkau berbilang baris.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Jadual Kompleks dengan Rowspan dan Cellspan yang berbeza dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!