Comment implémenter l'expansion dynamique des lignes de table avec jQuery ?

Extension dynamique des lignes de table avec jQuery

Lorsque vous travaillez avec des données tabulaires, la possibilité d'agrandir et de réduire les lignes à la demande peut améliorer considérablement l'interaction de l'utilisateur . Dans ce scénario, vous recherchez une solution pour obtenir cette fonctionnalité lorsque vous cliquez sur une colonne d'en-tête spécifique.

Approche avec distinction de classe

Une approche consiste à attribuer une classe unique aux lignes appartenant à chaque en-tête. Lorsque vous cliquez sur un en-tête, vous pouvez utiliser jQuery pour localiser ses lignes associées et appliquer un effet slideToggle() pour les développer ou les réduire. Bien que cette méthode soit efficace, la gestion de plusieurs classes CSS peut devenir fastidieuse avec de nombreux en-têtes.

Approche alternative : nextUntil()

Une alternative plus simple utilise la fonction nextUntil() de jQuery . En ajoutant une classe « en-tête » aux lignes d'en-tête, vous pouvez utiliser le code suivant :

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

Cette fonction vous permet de parcourir les lignes du tableau sous l'en-tête cliqué jusqu'à rencontrer un autre en-tête. L'effet slideToggle() est ensuite appliqué aux lignes correspondantes, fournissant la fonctionnalité d'expansion/réduction souhaitée.

Démo et variantes

Les codes HTML et JavaScript fournis le démontrent. approche. Un exemple supplémentaire montre comment utiliser un élément span dans l'en-tête pour afficher des icônes « » ou « - » pour indiquer une expansion/réduction.

Pour un effet plus dynamique, vous pouvez utiliser une promesse pour basculer l'icône/ le texte après la bascule est terminé en cas de transitions animées.

Alternativement, un pseudo-élément CSS peut être utilisé pour représenter le signe d'expansion/réduction. Lorsqu'un utilisateur clique sur un en-tête, une classe bascule sur l'en-tête et les lignes du tableau sont développées ou réduites en conséquence.

Ces techniques fournissent des méthodes flexibles et efficaces pour développer/réduire les lignes du tableau en réponse aux clics sur l'en-tête.

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!