HTMLのTableタグを利用する際、jQueryによる操作、CSSでのスタイル設定時の注意点について、自分がハマった内容をメモしていきます。
tr、tdタグをslideUp、slideDownする方法
通常、tr、td要素に対してslideUp、slideDownしても思ったように動作しません。
本来の動きである縦幅がスーッとスライドして伸び縮みする「過程」をすっ飛ばして、伸び縮みした「結果」だけが残ります。(キング・クリムゾン感)
スライドさせるためには、tr内のtd内をすべてdiv要素で囲んでやるようにし、div要素に対してslideUp、slideDownすることで擬似的にスライドを実現させます。
併せて、tr（またはtd）を表示・非表示を切り替えることで、無駄な枠線（border）が残ること防ぎます。
■jQuery
<script type="text/javascript">
$(function (){
$("#button1").on("click", function(i){
$("#testTable").find("tr").eq(1).find("div").slideUp(500); //0.5秒かけてスライドして非表示
$("#testTable").find("tr").eq(1).hide(500); //0.5秒後に要素を非表示
});
$("#button2").on("click", function(i){
$("#testTable").find("tr").eq(1).show(); //即座に要素を表示
$("#testTable").find("tr").eq(1).find("div").slideDown(500); //0.5秒かけてスライドして表示
});
});
</script>
■html
<input id="button1" type="button" value="2行目をslideUp"></input> <input id="button2" type="button" value="2行目をslideDown"></input> <br> <br> <table id="testTable" class="font12"> <tr> <th width="20"></th> <th width="120">商品</th> <th width="100">値段</th> </tr> <tr> <td><div>1</div></td> <td><div>いんげん豆</div></td> <td><div>120円</div></td> </tr> <tr> <td>2</td> <td>もやし</td> <td>30円</td> </tr> </table>
■実行結果
