La table arborescente des éléments implémente toutes les sélections

Cet article explique comment implémenter une table arborescente avec une case à cocher Tout sélectionner en HTML à l'aide de l'élément. L'argument principal est que la meilleure approche consiste à utiliser JavaScript pour ajouter une case à cocher Sélectionner tout à l'en-tête du tableau, puis à utiliser JavaScript pour li

Quelle est la meilleure approche pour implémenter une table arborescente avec une case à cocher Tout sélectionner en HTML à l'aide d'un élément ?

La meilleure approche pour implémenter une table arborescente avec une case à cocher Tout sélectionner en HTML à l'aide d'un élément consiste à utiliser JavaScript pour ajouter une case à cocher Tout sélectionner à l'en-tête du tableau, puis à utiliser JavaScript pour écouter les modifications apportées au case à cocher et mettez à jour le statut coché de toutes les cases à cocher enfants en conséquence. tableau à l'aide d'un élément, vous pouvez suivre les étapes suivantes :

Créez un élément de tableau et ajoutez une ligne d'en-tête.

Ajoutez une case à cocher Sélectionner tout à la ligne d'en-tête.

Ajoutez un élément tbody au tableau.

Ajoutez un élément tr pour chaque ligne de la table arborescente. Voici un exemple de la façon de procéder :

<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>

1. Puis-je utiliser element pour créer un tableau hiérarchique avec une case à cocher tout sélectionner pour chaque niveau ?
3. Oui, vous pouvez utiliser pour créer un tableau hiérarchique avec une case à cocher tout sélectionner pour chaque niveau. Vous allez créer une structure imbriquée d'éléments et, puis utiliser JavaScript pour ajouter une case à cocher Tout sélectionner à chaque niveau.
4. Voici un exemple de la façon de procéder :

<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>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!