最近可能各位有發現到，梅干比較少發文，回應的速度也慢了下來，難道梅干要廢站了嗎？呵～當然不是，而是梅干最近正在自製購物車，並把購物車跟Wordpress結合起來，呼！到今天總算有點進展了，在這過程中還遇到了不少奇怪的問題，好在有好友男丁大力的相助下，解決了梅干不少的問題，今天要與各位來分享一個jQuery的怪狀況，雖然有不少人說table已死，但對於表單依然還是table的天下，但jQuery對於table的支援又有些弱，今天若要點選編號，才秀出該筆訂單的明細時，只可用show、hide，若想使用slideDown、slideUp則會發現表格大亂，因此為了達到梅干的想要的效果，梅干就作了點修正，讓在table下也可使用slideDown、slideUp。
放在＜head＞…..＜/head＞之間：
<script type=“text/javascript” src=“http://code.jquery.com/jquery-latest.pack.js"></script> <script> $(function(){ $(“a”).click(function(){
var _this= $(this).attr(“href”);
if($(_this).css(“display”)==“none”){ $(_this).slideDown(); $(this).html(“-”); }else{ $(_this).slideUp(); $(this).html(“+”); }
return false;
});
}); </script> <style type=“text/css”> body{font-size:12px;} a{ color:#333333; text-decoration: none; font-size:15px; display:block; } table tr td{border:solid 1px #ccc;} div{padding:10px 30px;} </style>
放在＜body＞…..＜/body＞之間：
<table width=“500” border=“0” cellspacing=“0” cellpadding=“0”>
<tr>
<td width=“26” align=“center” bgcolor=“#eeeeee”><a href=“#tr1”>+</a></td>
<td width=“474”> 訂單01</td>
</tr>
<tr>
<td colspan=“2” class=“content”>
<div id=“tr1” style=“display:none;”>訂單01明細內容</div>
</td>
</tr>
<tr>
<td align=“center” bgcolor=“#eeeeee”><a href=“#tr2”>+</a></td>
<td> 訂單02</td>
</tr>
<tr>
<td colspan=“2” class=“content”>
<div id=“tr2” style=“display:none;”>訂單02明細內容</div>
</td>
</tr>
</table>
雖然說用show()、hide()也是一樣可把表單秀出來，為何非得用slideDown、slideUp，這邊就得原諒梅干的職業病，說穿了只是因為它有滑動效果，看起來很酷，且不用寫落落長的語法就可搞定，而範例中梅干只是把下面的tr中的td合併起來，再塞一個div進去，然後控制div的開合，且只是把它藏在td之中。
[範例預覽]