Bagaimana untuk Mengubah Suai Fungsi Penciptaan Jadual untuk Mencapai Reka Letak Khusus dengan Mengubah Kiraan Baris dan Sel dalam JavaScript?

Mengubah suai Fungsi Penciptaan Jadual untuk Reka Letak Tertentu

Memandangkan fungsi JavaScript yang direka untuk mencipta jadual dengan 3 baris dan 2 sel, soalan ini mendapatkan panduan tentang cara mengubah suai ia untuk meniru susun atur jadual yang diberikan di mana terdapat 3 baris, tetapi hanya 2 sel dalam baris pertama dan ketiga, manakala baris kedua hanya mempunyai satu sel yang merentangi dua baris.

Menyesuaikan Kod JavaScript :

Fungsi sedia ada boleh disesuaikan menggunakan pendekatan yang lebih ringkas dengan kaedah insertRow dan insertCell, seperti yang ditunjukkan di bawah:

<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);
}</code>

Kod ini:

• Mencipta jadual dengan lebar 100 piksel dan jidar hitam.
• Gelung melalui 3 baris, mencipta baris baharu setiap kali.
• Untuk setiap baris, ia bergelung melalui 2 lajur , mencipta sel baharu untuk setiap lajur.
• Laraskan baris kedua untuk menjangkau dua baris dengan menetapkan atribut rowSpan kepada 2.
• Memeriksa indeks baris dan sel untuk keluar daripada gelung kedua untuk susun atur yang dikehendaki.

Keputusan Akhir:

Melaksanakan fungsi tableCreate yang diubah suai akan menghasilkan jadual dengan susun atur yang diberikan:

Cell I0/J0	Cell I0/J1
Cell I1/J0	Cell I1/J1
Cell I2/J0

Atas ialah kandungan terperinci Bagaimana untuk Mengubah Suai Fungsi Penciptaan Jadual untuk Mencapai Reka Letak Khusus dengan Mengubah Kiraan Baris dan Sel dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!