jQueryでtableのtrタグごとに折りたたみ表示する方法

最終更新日	2013/10/23
公開日	2012/11/19
カテゴリ	プログラミングの小ネタ
文字数	1,275
読了時間	約3分

今、開発しているWebシステムでtableのtrタグごとに折りたたいところがありました。

すぐにできるだろうと思っていましたが、これが思いの外苦労して、なんとか出来たというのが率直な感想です。

こういうやり方をするケースが少ないのか情報を見つけるのに苦労しました。1行だけ折りたたむというサンプルはありましたが、複数行折りたたむのはさっぱり見つかりませんでした。

JQuery intermediate site / Phillie Casablanca

参考にしたページ

[jquery]IE8でtrに.toggle()が効かない

これのようにやればうまくできました。
toggle関数が効かないというのも対応したソースを以下に載せておきますね。

jQueryのことをさっぱりわかっていない私には上のページだけでは理解できないのです。

 //html <a id="readOnlyRowsToggle">Click</a></p>
<table>
<tbody>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr class="readOnlyRow">
<td>row</td>
</tr>
<tr class="readOnlyRow">
<td>row</td>
</tr>
<tr class="readOnlyRow">
<td>row</td>
</tr>
</tbody>
</table>

//javascript 
$(document).ready(function() {
 $(".readOnlyRow").hide();
 $("#readOnlyRowsToggle").click(function() {
  var elem = $(".readOnlyRow")[0];
  if(elem.style.display == 'none')
   $(".readOnlyRow").show();
  else 
   $(".readOnlyRow").hide();
 }); 
});

<p>

これでtrタグを一気に折りたたむことができます。

折りたたんで作ったのがコレです！

折りたたむ前