テーブルでjQueryの表示/非表示の切り替えを使用する

StackOverflow https://stackoverflow.com/questions/1213032

  •  06-07-2019
  •  | 
  •  

質問

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>
役に立ちましたか？

解決

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

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

または

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

TDに移動するparent（）呼び出しを1つだけ行っているので、TRにステップアップする必要があります。

他のヒント

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

彼もやっている例に気づくでしょう：

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

これがトグルクラス要素を非表示にしているものです。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top