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

Agrandissement et réduction dynamique des lignes d'un tableau avec jQuery

Problème :

Agrandissement ou réduction d'un tableau les lignes lorsqu'un en-tête de colonne spécifique est cliqué pose un défi. Pour simplifier cette tâche, une classe CSS personnalisée peut être utilisée pour distinguer les lignes dans chaque en-tête. Cependant, la gestion de plusieurs classes CSS pour plusieurs en-têtes peut devenir fastidieuse.

Solution :

Pour éviter la complexité du suivi de plusieurs classes CSS, une approche alternative exploite le nextUntil( ) méthode dans jQuery. Cette méthode récupère toutes les lignes suivant la ligne d'en-tête cliquée, jusqu'à ce que la ligne d'en-tête suivante soit rencontrée.

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>

Exemple :

Dans cet exemple, une classe « en-tête » est affectée à la ligne d'en-tête. Lorsqu'un utilisateur clique sur une ligne d'en-tête, les lignes situées immédiatement en dessous basculent entre masquées et visibles, à l'aide de la méthode slideToggle().

Fonctionnalités supplémentaires :

• Vous pouvez utiliser un élément span dans la ligne d'en-tête pour afficher un signe " " ou "-", qui bascule une fois la ligne développée ou réduite :

<code class="javascript">$('.header').click(function(){
    $(this).find('span').text(function(_, value){return value=='-'?'+':'-'});
    $(this).nextUntil('tr.header').slideToggle(100);
});</code>

• Pour basculer la durée icône/texte de manière asynchrone une fois la bascule terminée, utilisez la promesse() de la méthode slideToggle() :

<code class="javascript">$(this).nextUntil('tr.header').slideToggle(100).promise().done(function () {
    $this.find('span').text(function (_, value) {
        return value == '-' ? '+' : '-'
    });
});</code>

• Vous pouvez également utiliser un pseudo-élément CSS pour représenter l'expansion/la réduction signez et basculez une classe sur l'en-tête :

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

<code class="javascript">$(this).toggleClass('expand').nextUntil('tr.header').slideToggle(100);</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!