Bagaimana untuk Membuat Jadual dengan Gabungkan Sel Menggunakan JavaScript?

Mencipta Jadual Kompleks Menggunakan JavaScript

Dalam JavaScript, penciptaan jadual boleh dilakukan menggunakan dan elemen. Walau bagaimanapun, kadangkala, jadual dengan struktur yang lebih rumit diperlukan.

Cabaran: Mencipta Struktur Jadual Tertentu

Andaikan anda mempunyai fungsi JavaScript yang mencipta jadual dengan 3 baris dan 2 sel dalam setiap baris. Bagaimanakah anda boleh menyesuaikan fungsi ini untuk mencipta jadual berikut:

<code class="html"><table>
  <tr>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td rowspan="2"> </td>
  </tr>
  <tr>
    <td> </td>
  </tr>
</table></code>

Penyelesaian: Penggabungan Baris dengan rowSpan

Untuk mencipta jadual dengan sel yang digabungkan, anda perlu untuk menggunakan atribut rowSpan. Begini cara anda boleh mengubah suai kod anda:

Kod JavaScript:

<code class="javascript">function tableCreate() {
  const body = document.body;
  const tbl = document.createElement('table');

  for (let i = 0; i < 3; i++) {
    const row = document.createElement('tr');

    for (let j = 0; j < 2; j++) {
      if (i === 2 && j === 1) {
        continue;
      } else {
        const cell = document.createElement('td');
        cell.textContent = `Cell I${i}/J${j}`;
        if (i === 1 && j === 1) {
          cell.setAttribute('rowspan', '2');
        }
        row.appendChild(cell);
      }
    }
    tbl.appendChild(row);
  }
  body.appendChild(tbl);
}

tableCreate();</code>

Penjelasan:

• The Atribut rowSpan ditambahkan pada sel kedua dalam baris kedua, menggabungkannya dengan sel di bawah.
• Sel dengan rowSpan dilangkau dalam j === 1 lelaran untuk mengelakkan sel pendua.

Kod Pendek yang Diperbaiki Menggunakan insertRow dan insertCell:

<code class="javascript">function tableCreate() {
  const body = document.body;
  const 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>

Versi yang dipertingkat ini menggunakan kaedah insertRow dan insertCell untuk pelaksanaan yang lebih ringkas.

Atas ialah kandungan terperinci Bagaimana untuk Membuat Jadual dengan Gabungkan Sel Menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!