Utiliser jQuery afficher / masquer les bascules dans un tableau

Question

J'essaie d'adapter le show / hide / mini-accordéon d'Andy Langton ( http: / /andylangton.co.uk/jquery-show-hide ) pour travailler dans une table. Je souhaite créer une liste d'événements avec un formulaire de confirmation joint à chaque événement. En cliquant sur le bouton "confirmer" dans la dernière cellule ou dans la dernière ligne, je souhaite que le formulaire associé à cet événement soit révélé.

Le code de Andy utilise

$('.toggle')
    .prev()
    .append('<a href="#" class="toggleLink">'+showText+'</a>');

pour ajouter dynamiquement le lien bascule (le bouton de confirmation) juste avant le formulaire masqué. Cela ajoute cependant le lien dans la ligne du tableau et non dans une cellule. Je l'ai donc changé en

$('.toggle')
    .prev()
    .append('<td><a href="#" class="toggleLink">'+showText+'</a></td>');

Le lien est maintenant au bon endroit, mais n'invoque pas maintenant l'affichage / le masquage du formulaire. Quand il était mal placé, la fonctionnalité fonctionnait, même si elle n’avait pas tout à fait raison. Je pense que le sélecteur qui appelle l'action de basculement n'est pas correct mais je ne sais pas comment le corriger. C'est actuellement

$(this)
    .parent()
    .next('.toggle')
    .toggle('slow');

C’est essentiellement l’aspect de la source ...

<table id="training-events">
<tr>
   <th>Date / Time</th>
   <th>Event / Venue</th>
   <th>Cost</th>
   <th>Confirm</th>
</tr>
<tr class="event" valign="top">
    <td class="date">Mon, 10 August 2009<br>03:30 PM - 05:30 PM</td>
    <td><h5>Regional Director Meeting</td>
    <td>No Charge</td>
    <td><a href="#" class="toggleLink">Cancel</a></td>
</tr>
<tr style="display: none;" class="toggle">
   <td colspan="4">
      ** FORM **
   </td>
</tr>
</table>

Answer 1

Vous avez besoin de quelque chose comme:

$(this).parent().parent().next('.toggle').toggle('slow')

ou

$(this).closest('tr').next('.toggle').toggle('slow'); 

Vous ne faites qu'un seul appel parent () qui vous amène au TD, vous devez passer au TR.

Answer 2

Cela fonctionne pour moi si je supprime le style = " display: none; " à partir de la bascule TR.

Vous remarquerez dans l'exemple qu'il fait aussi:

 $('.toggle').hide();

C’est ce qui cache les éléments classifiés à bascule.