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

Développer/Réduire les lignes du tableau avec jQuery

L'expansion et la réduction des lignes du tableau en fonction des clics sur l'en-tête sont une exigence courante dans la conception Web. Dans cet article, nous allons explorer comment y parvenir en utilisant jQuery.

Étant donné la structure de tableau suivante :

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

Nous pouvons aborder cette tâche en attribuant une classe unique à chaque ligne d'en-tête. Lorsqu'on clique sur un en-tête, nous pouvons utiliser la méthode nextUntil pour sélectionner toutes les lignes en dessous jusqu'à l'en-tête suivant. Cela nous permet de réduire ou de développer uniquement les lignes pertinentes en fonction de l'en-tête sur lequel vous avez cliqué.

Voici un simple extrait de code jQuery pour implémenter ce comportement :

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

Dans ce code, nous attachez un événement click à tous les éléments avec la classe d'en-tête. Lorsqu'on clique sur un en-tête, il trouve toutes les lignes suivantes jusqu'à l'en-tête suivant et bascule leur visibilité à l'aide de slideToggle.

Méthodes alternatives

Une autre option consiste à utiliser la méthode toggle au lieu de slideToggle, qui fournit une implémentation plus simple :

<code class="js">$('.header').click(function () {
    $(this).toggleClass('expand');
    $(this).nextUntil('tr.header').toggle();
});</code>

Ici, nous basculons une classe d'expansion sur l'en-tête cliqué et basculons l'affichage de toutes les lignes suivantes à l'aide de toggle.

Enfin, les pseudo-éléments CSS peuvent également être utilisé pour une représentation plus visuelle de l'état d'expansion/effondrement :

<code class="css">.header .sign:after {
  content: "+";
  display: inline-block;
}

.header.expand .sign:after {
  content: "-";
}</code>

<code class="js">$('.header').click(function () {
    $(this).toggleClass('expand');
    $(this).nextUntil('tr.header').slideToggle(100);
});</code>

Dans cette version, la classe expand modifie également le signe affiché par le pseudo-élément CSS d'un plus à un moins, fournissant une indication visuelle de l'état de la ligne.

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!