Table pliante dans jQuery

J’essaie de créer une table dont les lignes d’en-tête peuvent être réduites et développées à l’aide de jQuery. Voici l’intégralité de mon code jusqu’à présent:

     $(document).ready(function() { $("tr#cat1.header").click(function () { $("tr#cat1.child").each(function() { $(this).slideToggle("fast"); }); }); });      Cat1  Row  
  data1  data2  
  data3  data4  
  Cat1  Row  
  data1  data2

Si je ne me trompe pas, la partie jQuery en anglais se lit comme suit: “Lorsqu’on clique sur une ligne portant l’ID de” cat1 “et une classe d ‘” en-tête “, toutes les lignes portant un identifiant de” cat1 “et une classe de ‘enfant’ et pour chacun d’eux, slideToggle. ”

Pourtant, lorsque je l’exécute et que je clique sur une ligne d’en-tête, rien ne se passe. Un aperçu?

EDIT: Ajout d’une deuxième catégorie au tableau HTML. Désolé, j’aurais dû être plus précis. Je souhaite pouvoir cliquer sur une ligne d’en-tête pour une catégorie particulière et ne faire que réduire ces lignes enfants, pas toutes les lignes enfants de la page. De cette manière, la table se comporte comme un “accordéon” et les lignes sont regroupées par catégorie.

Cela fera en sorte que le clic n’affecte que les lignes de la table contenant l’en-tête sur lequel vous avez cliqué, ce qui signifie que vous pouvez le modifier pour qu’il fonctionne avec une classe CSS au lieu de dupliquer l’identifiant.

 $("tr#cat1.header").click(function () { $("tr#cat1.child", $(this).parent()).slideToggle("fast"); });

Fondamentalement, c’est l’en-tête sur lequel on a cliqué, nous l’enveloppons dans un object jQuery et appelons parent() (qui retourne la table), puis nous l’indiquons comme contexte de la nouvelle requête.

Votre page ressemble maintenant à ceci:

          Cat1  Row  
  data1  data2  
  data3  data4  
 
   Cat1  Row  
  data1  data2  
  data3  data4

Tout d’abord, vous ne devriez pas avoir d’identifiants en double pour les lignes. Les identifiants doivent être uniques pour chaque élément de la page.

En outre, vous ne devriez pas avoir à les utiliser car jQuery appliquera automatiquement la fonction slideToggle à chaque élément correspondant au sélecteur. Je suggérerais de supprimer les identifiants et d’utiliser les noms de classe à la place:

 $("tr.header").click(function () { $("tr.child").slideToggle("fast"); });

Si vous voulez vous assurer que seules certaines tables peuvent exécuter cette fonctionnalité, placez une classe sur la table et mettez à jour vos sélecteurs:

  --- $(".collapsible tr:first").click(function () { $(this).nextAll().slideToggle("fast"); });  Cat1  Row  
  Collapsible  Row

Réponse à modifier:

La réponse de Rory est correcte, je la développe simplement. Si vous utilisez plusieurs tables, vous pouvez supprimer les classes CSS des

sur les lignes et simplifier les tables pour:

   Cat1  Cat1  
  Collapsible  Row  
 
   Cat2  Cat2  
  Collapsible  Row

et le jQuery jusqu’à:

 $(".collapsible tr:first").click(function () { $(this).nextAll().slideToggle("fast"); });

Ceci est une extension de la réponse de fadeToggle pour gérer plusieurs niveaux de hiérarchie. Je préfère également fadeToggle à slideToggle car (au moins dans FF v24) lorsque vous avez des centaines de lignes dans votre table, le slideToggle ne fait rien pendant une seconde les rangées disparaissent soudainement – ce qui vous fait vous demander si vous avez bien cliqué sur la rangée. fadeToggle commence instantanément à s’estomper les lignes pour que vous sachiez qu’il se passe quelque chose.

Au lieu de la classe child , j’utilise l’ id du parent direct. Vous pouvez alors travailler de manière récursive dans chaque twig. De plus, il existe une classe ‘collapsed’ que j’utilise pour résoudre le problème de la réduction d’une ligne parent lorsqu’il existe une ligne enfant déjà réduite.

S’il vous plaît voir le JSFiddle du code ci-dessous:

           Cat1  Row  
  data1  data2  
  Cat1a  Row  
  data1  data2  
  data3  data4  
  Cat2  Row  
  data1  data2

Cat1	Row
data1	data2
Cat1a	Row
data1	data2
data3	data4
Cat2	Row
data1	data2

Ça ne devrait pas être plus comme ça? Je veux dire, c’est normalement tout le document.

  $("tr#cat1.header").click(function () { $("tr#cat1.child").slideToggle("fast"); });