tableタグ内のtr要素を見せたり隠したりしたかった際に嵌ったのでメモ。

通常DOM要素を見せ隠ししたい場合は、displayプロパティを「none」や「block」にして操作する。

が、trのdisplayプロパティの場合「none」に対をなす値が「block」ではなく「table-row」となる。

ざっくり言うと。

■divとか

display:none / block

■tr

display:none / table-row

となる。

なので以下のようなコードを書くと表示が崩れておかしくなるので注意。

■HTML

<button type="button" class="js_btn">btn</button>

<table class="table">
<thead>
<tr><th>hoge</th><th>fuga</th></tr>
</thead>
<tbody>
<tr class="tr1"><td>ho</td><td>ge</td></tr>
<tr class="tr2"><td>fu</td><td>ga</td></tr>
</tbody>
</table>

■Javascript

<script>
$(function(){
	$('.js_btn').click(function(){
		if($('.tr1').css('display') == 'none'){
			// display:table-rowでなければならない
			$('.tr1').css({'display':'block'});
		}else{
			$('.tr1').hide();
		}
	})
})
</script>

これはボタンをクリックした際に特定のtr要素を調査し、display属性がnoneであればblockに、そうでなければnoneに変更するスクリプトであるが、この場合 において要素を再表示させたいのであれば、5行目を「$(‘.tr1′).css({‘display':’table-row’});」とする必要がある。