読者です 読者をやめる 読者になる 読者になる

jQuery UI を使わない table の Accordion

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>

CSSスタイル、、、
/* ハンドラの表示スタイル */
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('▼');
      }
   });
});

--- 初期表示 ---

f:id:posturan:20160313170025j:plain

--- B ▼ のセルをクリックすると、 ---

f:id:posturan:20160313170117j:plain