【jQuery,CSS】Table関連タグでハマったことのメモ

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>

■実行結果

スポンサーリンク

フォローする

スポンサーリンク