Table の折畳み

Rails をいじっていたら、テーブルを折畳むような JavaScript が必要になりました。Google 先生に聞いてみても、機材(折りたたみ式テーブル)の説明ばかり出たので自分で実装してみました。

以下のコードは、TABLE タグの要素が ヘッダ(thead)、ボディ(tbody)、フッタ(tfoot)に明確に分かれている必要があります。方法は至ってシンプルで、TABLE タグに ID を振り、折畳むテーブルを識別できるようにします。後は、tbody タグのスタイルをいじってやれば完了です。

/**
 *  Table を折畳む
 */
function fold_table(id)
{
  var table = $(id)
  var tbody = table.getElementsByTagName('tbody')[0];
  tbody.style.display = 'none';
}

/**
 *  Table を展開する
 */
function unfold_table(id)
{
  var table = $(id)
  var tbody = table.getElementsByTagName('tbody')[0];
  tbody.style.display = '';
}

今回は直接スタイルをいじっていますが、実際はクラスをいじったほうがいいでしょう。テーブルタグは以下のような感じで作ります。

<table id="hoge">
<thead>
  <tr><th>ヘッダ</th></tr>
<thead>
<tbody>
  <tr><td>ボディ</td></tr>
</tbody>
<tfoot>
  <tr><td>フッタ</td></tr>
</tfoot>
</table>

呼び出しは、

javascript:fold_table('hoge');

となります。