Jadual pokok elemen melaksanakan semua pemilihan

Artikel ini membincangkan cara melaksanakan jadual pokok dengan kotak semak pilih semua dalam HTML menggunakan elemen. Hujah utama ialah pendekatan terbaik ialah menggunakan JavaScript untuk menambah kotak semak pilih semua pada pengepala jadual dan kemudian gunakan JavaScript untuk li

Apakah pendekatan terbaik untuk melaksanakan jadual pokok dengan kotak pilihan pilih semua dalam HTML menggunakan elemen?

Pendekatan terbaik untuk melaksanakan jadual pokok dengan kotak semak pilih semua dalam HTML menggunakan elemen ialah menggunakan JavaScript untuk menambah kotak semak pilih semua pada pengepala jadual, dan kemudian gunakan JavaScript untuk mendengar perubahan pada kotak semak dan kemas kini status yang ditandakan bagi semua kotak semak kanak-kanak dengan sewajarnya.

Berikut ialah contoh cara untuk melakukannya:

<code class="html"><table>
  <thead>
    <tr>
      <th><input type="checkbox" id="select-all"></th>
      <th>Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="checkbox" name="child"></td>
      <td>Child 1</td>
    </tr>
    <tr>
      <td><input type="checkbox" name="child"></td>
      <td>Child 2</td>
    </tr>
  </tbody>
</table>

<script>
  const selectAll = document.getElementById('select-all');
  const checkboxes = document.querySelectorAll('input[type="checkbox"][name="child"]');

  selectAll.addEventListener('change', (event) => {
    checkboxes.forEach((checkbox) => {
      checkbox.checked = event.target.checked;
    });
  });
</script></code>

Bagaimana untuk mereka bentuk jadual pokok dengan kotak pilihan pilih semua menggunakan elemen?

Untuk mereka bentuk pokok jadual menggunakan elemen, anda boleh menggunakan langkah berikut:

1. Buat elemen jadual dan tambah baris pengepala.
2. Tambah kotak semak pilih semua pada baris pengepala.
3. Tambah elemen tbody pada jadual.
4. Tambahkan elemen tr untuk setiap baris dalam jadual pepohon.
5. Tambahkan elemen td untuk setiap sel dalam baris.
6. Tambahkan kotak pilihan pada setiap sel yang mewakili nod dalam pepohon.
7. Gaya jadual menggunakan CSS.

Berikut ialah contoh cara untuk melakukannya:

<code class="html"><table>
  <thead>
    <tr>
      <th><input type="checkbox" id="select-all"></th>
      <th>Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="checkbox" name="child"></td>
      <td>Child 1</td>
    </tr>
    <tr>
      <td><input type="checkbox" name="child"></td>
      <td>Child 2</td>
    </tr>
  </tbody>
</table>
</code>

Bolehkah saya menggunakan elemen untuk mencipta jadual hierarki dengan kotak pilihan pilih semua untuk setiap peringkat?

Ya, anda boleh gunakan untuk mencipta jadual hierarki dengan kotak pilihan pilih semua untuk setiap peringkat. Anda akan mencipta struktur dan elemen bersarang, kemudian menggunakan JavaScript untuk menambah kotak pilihan pilih semua pada setiap peringkat.

Berikut ialah contoh cara untuk melakukannya:

<code class="html"><ul>
  <li>
    <input type="checkbox" id="level-1-select-all">
    <ul>
      <li>
        <input type="checkbox" name="level-2-child">
        <ul>
          <li>
            <input type="checkbox" name="level-3-child">
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

<script>
  const level1SelectAll = document.getElementById('level-1-select-all');
  const level2Checkboxes = document.querySelectorAll('input[type="checkbox"][name="level-2-child"]');

  level1SelectAll.addEventListener('change', (event) => {
    level2Checkboxes.forEach((checkbox) => {
      checkbox.checked = event.target.checked;
    });
  });
</script></code>

Atas ialah kandungan terperinci Jadual pokok elemen melaksanakan semua pemilihan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!