Usando jQuery Mostrar / ocultar alternância em uma tabela

Question

Eu estou tentando adaptar mostrar / esconder / mini-sanfona de Andy Langton ( http: / /andylangton.co.uk/jquery-show-hide ) para trabalhar dentro de uma tabela. Eu estou querendo criar uma lista de eventos com um formulário de confirmação ligado a cada evento. Ao clicar no botão 'confirmar' na última célula ou a linha, eu gostaria que o formulário associado a este evento especial a ser revelado.

usa código de Andy

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

dinamicamente adicionar o link de alternância (o botão confirmar) pouco antes de a forma escondida. Isso, no entanto, acrescenta o link dentro da linha da tabela e não em uma célula. Tenho, portanto, mudou para

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

O link está agora no lugar correto, mas que agora não invocar o show / hide do formulário. Quando foi colocado incorretamente a funcionalidade trabalhado, apesar de não ser muito certo. Eu sinto que o seletor chamando a ação de alternância não é correto, mas eu não sei como corrigi-lo. É atualmente

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

Esta é, essencialmente, como a aparência de origem ...

<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

Você precisa de algo como:

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

ou

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

Você está fazendo apenas uma chamada de mãe solteira (), que traz para o TD, você precisa pisar até a TR.

Answer 2

Isso funciona para mim se eu remover o style = "display: none;" da TR alternância.

Você notará no exemplo ele também está fazendo:

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

Isto é o que está escondendo os elementos de alternância classificada.