テーブル内でのjQueryの表示/非表示の切り替え

Question

私はAndy Langtonのshow/hide/mini-accordion（http://andylangton.co.uk/jquery-show-hide）をテーブル内で動作させようとしています。私は、各イベントに添付された確認フォームを使ってイベントのリストを作成したいと思っています。最後のセルまたは行の「確認」ボタンをクリックすると、この特定のイベントに関連付けられたフォームが公開されます。

アンディのコードが動的にだけ非表示フォームの前にトグルリンク（確認ボタン）を追加する

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

を使用しています。ただし、これはセル内ではなくテーブル行内にリンクを追加します。したがって私はそれを

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

に変更しました。リンクは現在適切な場所にありますが、フォームの表示/非表示を呼び出さないようになりました。それが間違って配置されたとき、機能が正しく機能していないにもかかわらず機能しました。私はトグルアクションを呼び出すセレクタが正しくないと感じますが、私はそれを修正する方法を知らない。これは、現在

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

これは、基本的にソースがどのように見えるかです...

私はスタイル=削除する場合これは私の作品

<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

あなたが何か必要があります：あなたが唯一のTDにあなたをもたらす単一の親（）の呼び出しを作っている、あなたがTRにステップアップする必要が

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

または

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

を。

Answer 2

「表示：なし;」トグルTRから。

あなたは彼がまたやっている例でわかります：

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

これはトグル分類要素を隠しているものです。