1. 首頁
  2. »
  3. 網頁開發
  4. »
  5. js
  6. jQuery教學-Table折疊使用滑動slideDown&slideUp效果

jQuery教學-Table折疊使用滑動slideDown&slideUp效果

2009/11/09

梅問題-jQuery教學-折疊滑動表單slideDown&UP for Table

  最近可能各位有發現到,梅干比較少發文,回應的速度也慢了下來,難道梅干要廢站了嗎?呵~當然不是,而是梅干最近正在自製購物車,並把購物車跟Wordpress結合起來,呼!到今天總算有點進展了,在這過程中還遇到了不少奇怪的問題,好在有好友男丁大力的相助下,解決了梅干不少的問題,今天要與各位來分享一個jQuery的怪狀況,雖然有不少人說table已死,但對於表單依然還是table的天下,但jQuery對於table的支援又有些弱,今天若要點選編號,才秀出該筆訂單的明細時,只可用show、hide,若想使用slideDownslideUp則會發現表格大亂,因此為了達到梅干的想要的效果,梅干就作了點修正,讓在table下也可使用slideDownslideUp


放在<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()也是一樣可把表單秀出來,為何非得用slideDownslideUp,這邊就得原諒梅干的職業病,說穿了只是因為它有滑動效果,看起來很酷,且不用寫落落長的語法就可搞定,而範例中梅干只是把下面的tr中的td合併起來,再塞一個div進去,然後控制div的開合,且只是把它藏在td之中。


[範例預覽]