Utilisation de jQuery show/hide bascule 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 veux créer une liste d'événements avec un formulaire de confirmation attaché à chaque événement. En cliquant sur le bouton 'confirmer' dans la dernière cellule ou la rangée, j'aimerais que le formulaire associé à cet événement particulier soit révélé.

code de Andy utilise

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

pour ajouter dynamiquement le lien bascule (le bouton confirmer) juste avant la forme cachée. Cela, cependant, ajoute le lien dans la ligne du tableau et non dans une cellule. Je l'ai donc changé pour

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

Le lien est maintenant à la bonne place mais n'invoque pas maintenant le show/hide du formulaire. Quand il a été placé incorrectement la fonctionnalité a fonctionné, en dépit d'être tout à fait raison. Je sens que le sélecteur appelant l'action de bascule n'est pas correct mais je ne sais pas comment le corriger. Il est actuellement

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

Ceci est essentiellement la façon dont la source semble ...

<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 quelque chose comme:

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

ou

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

Vous êtes seulement faire un appel parent seul() qui vous amène à la TD, vous devez relever le TR .

Answer 2

Cela fonctionne pour moi si je retire le style = "display: none;" à partir du toggle TR.

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

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

C'est ce qui se cache les éléments de bascule classés.