Comment développer et réduire les lignes d'un tableau avec jQuery ?

Développer et réduire les lignes du tableau avec jQuery

Problème :

Développer et réduire les lignes du tableau lorsqu'un clic sur une colonne d'en-tête spécifique est effectué, limiter l'expansion/la réduction aux lignes situées sous l'en-tête cliqué.

Solution proposée :

1. Identifier l'en-tête Lignes : Ajoutez une classe, telle que "en-tête", aux lignes d'en-tête.
2. Basculez l'expansion/la réduction : Utilisez la méthode .nextUntil() de jQuery pour sélectionner toutes les lignes sous le cliqué sur l'en-tête jusqu'à ce que l'en-tête suivant soit rencontré. Ensuite, utilisez .slideToggle() pour basculer la visibilité de ces lignes.

Extrait de code :

<code class="javascript">$('.header').click(function() {
    $(this).nextUntil('tr.header').slideToggle(1000);
});</code>

Structure HTML :

<code class="html"><table border="0">
  <tr class="header">
    <td colspan="2">Header</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
  </tr>
</table></code>

Fonctionnalités supplémentaires :

• Icône Développer/Réduire : Utilisez un élément span dans les cellules d'en-tête pour afficher un icône développer ou réduire. Mettez à jour l'icône en fonction de l'état actuel.
• Utilisation de la promesse : Utilisez la méthode .promise() de jQuery pour gérer les opérations asynchrones, telles que l'animation.
• CSS Pseudo-élément : Utilisez un pseudo-élément CSS pour représenter l'indicateur d'expansion/réduction et activez une classe sur l'en-tête pour contrôler la visibilité.

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!