jQuery UI のAccordion は手軽に使えて良いのだけど、table の行に対して適用するのは、困難になる。
原始的に、jQuery の toggle 関数で組むしかないみたいだ。
工夫が必要で、tbody タグを toggle 関数で制御する以下サンプルのような方法になる。
<table>
<thead>
<tr><th>Name</th><th>id</th></tr>
</thead>
<tbody>
<tr><td><div>A</div><div></div></td><td>1000</td></tr>
</tbody>
<tbody class="branch-B">
<tr><td><div>B</div><div>▼</div></td><td>3000</td></tr>
</tbody>
<tbody class="node-B">
<tr><td><div>b-1</div><div></div></td><td>3001</td></tr>
<tr><td><div>b-2</div><div></div></td><td>3002</td></tr>
<tr><td><div>b-3</div><div></div></td><td>3003</td></tr>
<tr><td><div>b-4</div><div></div></td><td>3004</td></tr>
</tbody>
<tbody>
<tr><td><div>C</div><div></div></td><td>3000</td></tr>
<tr><td><div>D</div><div></div></td><td>4000</td></tr>
</tbody>
</table>
ＣＳＳスタイル、、、
/* ハンドラの表示スタイル */
td div:nth-child(1){ display: table-cell; width: 80px; text-align: center;}
td div:nth-child(2){ display: table-cell; width: 20px; text-align: center;}
/* （重要）初期表示、ノードは隠しておく。*/
tbody.node-B{ display: none; }
jQuery のコード、、
$(function(){
$('.branch-B td:nth-child(1)').click(function(){
$(this).parents('table').children('.node-B').toggle();
if ($(this).children('div:nth-child(2)').html()==='▼'){
$(this).children('div:nth-child(2)').html('▲');
}else{
$(this).children('div:nth-child(2)').html('▼');
}
});
});
--- 初期表示 ---
--- Ｂ ▼ のセルをクリックすると、 ---
