テーブル本体を隠しておいて、必要に応じて表示させる – jQuery

$(“.conditions”).children().each(function(){ if(!$(this).is(‘caption’)){
$(this).hide();
}
});

$(“.conditions > caption”).click( function(){
$(this).parent().children().each(function(){
if(!$(this).is(‘caption’)){
$(this).toggle();
}
});
});

 こんなコードを書いて

<table class=’conditions’ border=’3′>
<caption>条件グループ1</caption>
<tr><th>条件1</th><td>hoge</td></tr>
<tr><th>条件2</th><td>piyo</td></tr>
</table>

<table class=’conditions’ border=’3′>
<caption>条件グループ2</caption>
<tr><th>条件A</th><td>hoge</td></tr>
<tr><th>条件B</th><td>piyo</td></tr>
</table>

 みたいなテーブル郡を用意しておくと、初期状態ではキャプションだけ表示されていて、キャプションをクリックする度にテーブル本体が開いたり閉じたりする。
 設定画面が縦に長くなっちゃう時などに、あまり利用しない部分を隠しておくのに便利。
 captionタグにスタイルをつけてcursor:pointer; color:blue;あたりを設定しておくとわかりやすい。

(14)


カテゴリー: jQuery   パーマリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です