Utilizzando jQuery mostra / nascondi attiva / disattiva in una tabella

Question

Sto cercando di adattare lo show / hide / mini-fisarmonica di Andy Langton ( http: / /andylangton.co.uk/jquery-show-hide ) per lavorare all'interno di un tavolo. Voglio creare un elenco di eventi con un modulo di conferma allegato a ciascun evento. Facendo clic sul pulsante "Conferma" nell'ultima cella o riga, vorrei che il modulo associato a questo particolare evento venisse rivelato.

Il codice di Andy utilizza

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

per aggiungere dinamicamente il collegamento di attivazione / disattivazione (il pulsante di conferma) appena prima del modulo nascosto. Ciò, tuttavia, aggiunge il collegamento all'interno della riga della tabella e non in una cella. L'ho quindi modificato in

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

Il link ora è nella posizione corretta ma ora non invoca lo show / hide del modulo. Quando è stato inserito in modo errato la funzionalità ha funzionato, nonostante non fosse del tutto corretta. Sento che il selettore che chiama l'azione di attivazione / disattivazione non è corretto ma non so come correggerlo. Attualmente è

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

Questo è essenzialmente l'aspetto della fonte ...

<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

Ti serve qualcosa del tipo:

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

o

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

Stai solo effettuando una chiamata single parent () che ti porta al TD, devi passare al TR.

Answer 2

Questo funziona per me se rimuovo style = " display: none; " dalla levetta TR.

Noterai nell'esempio che sta facendo anche:

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

Questo è ciò che nasconde gli elementi classificati di commutazione.