【JQuery】Table折疊使用滑動slideDown&slideUp效果

使用JQuery前，需要引用Jquery元件。

HTML 頁面(參考)︰

<table width="800" border="1" align="center" cellpadding="1" cellspacing="1" bordercolor="#CCCCCC">

 <tr bgcolor="#CCCCCC">  <!--(主)標題 -->

    <td width="20"></td>

 <td width="21">NO.</td>

    <td width="160">Company Name</td>

    … 省略 …

 </tr>

 <tr>    <!--(主)內容 -->

<td><a href="#tr1">+</a></td>

    … 省略 …

 </tr>

<tr>

<td colspan="9" class="content">                      

  <div id="tr1"  style="display:none;">  <!--控制細項顯示與隱藏 -->

          <table width="732" border="1" cellpadding="1" cellspacing="1" bordercolor="#CCCCCC">

            <tr bgcolor="#009900" style="color:#FFFFFF; ">       <!--(細項)標題 -->

              <th width="50" scope="col">Qty</th>

               … 省略 …

            </tr>

            <tr>     <!--(細項)內容 -->

              <td>10</td>

              … 省略 …

            </tr>

            <tr>  <!--(細項)內容 -->

              <td colspan="6">TEST~~TEST</td>

            </tr>

          </table>

  </div>

     </td>

    </tr>

</table> 

Javascript︰

<SCRIPT type="text/javascript">

$(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>

CSS(參考)︰

<style type="text/css">

body{font-size:12px;}

a{

color:#333333;

text-decoration: none;

font-size:15px;

display:block;

}

div{padding:10px 3px 10px 42px;}

a:link,a:visited{

color:#999999;

text-decoration:none;}

</style>

執行畫面(目前收合，點選+，變展開)︰

執行畫面(目前展開，點選-，變收合)︰