[jQuery] rowspanを持つtableで行の表示・非表示を切り替える

rowspanの設定された行を持つテーブルで、rowspanのない行を非表示にするとどうなるでしょうか？

上の表は奇数行の1列目にrowspan=”2″が設定されています。この状態で偶数行を非表示にすると、下のように表示が崩れてしまいます。

こうした複雑な表で、行の表示・非表示を切り替えるには、rowspanを持たない行を非表示にすると同時に、非表示になった行に関連するrowspanを無効にする処理が必要となります。

rowspanを野放図に使ってあちらこちらに他と結合したセルのある表を作っていけばキリがありません。さすがにそうした表で行の表示切替が必要となるケースは少ないと思われます。

ここでは、上で例に上げたような、rowspanを使った中ではシンプルな表で行の切り替えを行ってみます。

rowspanが設定されているのはtbodyタグ内の奇数行1列目のthタグとし、奇数行の列最後尾にボタンを設け、クリックで偶数行を非表示にします。

コードは以下の通りです。

<table id='target'>
	<tbody>
		<tr class='high'>
			<th rowspan='2'>TH</th>
			<td>high</td>
			<td>high</td>
			<td>high</td>
			<td><button>hide</button></td>
		</tr>
		<tr class='low'>
			<td>low</td>
			<td>low</td>
			<td>low</td>
			<td></td>
		</tr>
		<tr class='high'>
			<th rowspan='2'>TH</th>
			<td>high</td>
			<td>high</td>
			<td>high</td>
			<td><button>hide</button></td>
		</tr>
		<tr class='low'>
			<td>low</td>
			<td>low</td>
			<td>low</td>
			<td></td>
		</tr>
	</tbody>
</table>
<script>
$("#target td>button").click(function(){
  var tr = $(this).parents("tr");
  
  //切り替え対象行判定
  var num = $("#target tbody>tr").index( tr ) + 1;
  
  //クリックされた行のrowspanを取得
  var rowspan = tr.children("th").attr("rowspan");
  
  if( rowspan == 2 ){
    $("#target tbody>tr:eq("+num+")").hide();
    tr.children("th").attr("rowspan", 1);//下段を非表示にする際はrowspanを1に
  }else{
    $("#target tbody>tr:eq("+num+")").show();
    tr.children("th").attr("rowspan", 2);//下段を表示する際は2に戻す
  }
});
</script>

いろいろなやり方があると思いますが、ここではrowspanを1に変えることで対応しました。