1

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

Andy のコードの使用

$('.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>
4

2 に答える 2

5

次のようなものが必要です：

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

また

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

TD に移動する単一の parent() 呼び出しを行っているだけです。TR にステップアップする必要があります。

于 2009-07-31T15:31:45.553 に答える
0

style="display:none;" を削除すると、これが機能します。トグルTRから。

彼が行っている例で気付くでしょう:

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

これは、トグル クラスの要素を隠しているものです。

于 2009-07-31T15:20:13.933 に答える