Bagaimana untuk Mencipta Jadual HTML Kompleks dengan Rowspans dan Sel Bercantum Menggunakan JavaScript?

Buat Semula Struktur Jadual HTML Kompleks Menggunakan JavaScript

Dalam artikel ini, kami akan menangani isu khusus yang dihadapi oleh pembangun: mencipta kompleks Struktur jadual HTML menggunakan JavaScript. Mari kita mendalami masalah dan penyelesaiannya.

Masalah:

Fungsi JavaScript wujud yang mencipta jadual ringkas dengan 3 baris dan 2 lajur. Cabarannya ialah untuk mengubah suai fungsi untuk menghasilkan struktur jadual yang lebih kompleks dengan rentang baris yang berbeza-beza dan sel yang digabungkan, seperti yang digambarkan dalam kod HTML yang disediakan.

Penyelesaian:

Kepada mencapai ini, kami akan menggunakan kaedah insertRow dan insertCell terbina dalam yang disediakan oleh HTML DOM. Berikut ialah kod JavaScript yang disemak:

<code class="javascript">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 &amp;&amp; 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 &amp;&amp; j === 1) {
          td.setAttribute('rowSpan', '2');
        }
      }
    }
  }
  body.appendChild(tbl);
}

tableCreate();</code>

Penjelasan:

Kod itu berulang pada baris dan lajur jadual, mencipta sel individu menggunakan insertCell dan menetapkan sifatnya dengan sewajarnya. Syarat jika (i === 1 && j === 1) { td.setAttribute('rowSpan', '2'); } adalah penting. Ia mengendalikan rentang baris untuk sel yang digabungkan dalam baris 2.

Dengan menggunakan kaedah insertRow dan insertCell, kami mempunyai kawalan yang lebih besar ke atas struktur jadual, membolehkan kami membuat jadual kompleks dengan cepat dan dinamik dengan rentang baris yang berbeza-beza dan sel yang digabungkan .

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Jadual HTML Kompleks dengan Rowspans dan Sel Bercantum Menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!