返回列表 發帖

jQuery fadeIn 與 fadeOut問題

版上各位大大好~

我是jQuery新手,以下有個問題想請教一下版上的各位大大
由於我從DB撈出來的資料量比較多,又不想讓USER翻頁
所以使用網路上dataTable(官方網頁:http://www.datatables.net/)這個jQuery UI來呈現table換頁的功能
可是我在整個table中有三個欄位一開始是隱藏的
當USER點選"顯示細節"時才會顯示那三個欄位
當然也可以點選"關避細節"來隱藏那三個欄位
可是只要table一換頁以後,就必須再按一次"顯示細節"才會show出細節
相對的"關閉細節"也必須一頁一頁去按
煩請有經驗的大大們指教一下~
以下是我的code

<head>
     <script type="text/javascript">
    $(document).ready( function() {
            $('#showDetail1').click( function() {
            $('th:hidden').fadeIn('slow');
            $('th:hidden').fadeIn('slow');
            $('th:hidden').fadeIn('slow');
            $('td:hidden').fadeIn('slow');
            $('td:hidden').fadeIn('slow');
            $('td:hidden').fadeIn('slow');
             });
           
            $('#closeDetail1').click( function() {
            $('th:[id="detail_title01"]').fadeOut('slow');
            $('th:[id="detail_title02"]').fadeOut('slow');
            $('th:[id="detail_title03"]').fadeOut('slow');
            $('td:[class="detail01"]').fadeOut('slow');
            $('td:[class="detail02"]').fadeOut('slow');
            $('td:[class="detail03"]').fadeOut('slow');
                 });
    });
   
    </script>
</head>
      
<body>
      <input type="button" id="showDetail1" name="showDetail1" value="顯示細節" style="left: 720px; top: 100px; position: absolute"/>
                        <input type="button" id="closeDetail1" name="closeDetail1" value="關閉細節" style="left: 800px; top: 100px; position: absolute"/>
                       
                        <table id="beforeSale" class="display" cellspacing="0" width="100%">
                                <thead>
                                        <tr>
                                                <th align="center" width="120" hieght="30" style="background-color:#FFCC22; font-size:16px;">
                                                        <b>column 1</b>
                                                </th>
                                                <td align="center" width="120" height="30" style="background-color:#FFCC22; font-size:16px;">
                                                        <b>column 2</b>
                                                </th>
                                                <td align="center" width="120" height="30" style="background-color:#FFCC22; font-size:16px;">
                                                        <b>column 3</b>
                                                </th>
                                                <th align="center" width="100" height="30" style="background-color:#FFCC22; font-size:16px;">
                                                        <b>column 4</b>
                                                </th>
                                                <th align="center" width="80" height="30" style="background-color:#FFCC22; font-size:16px;">
                                                        <b>column 5</b>
                                                </th>
                                                <th align="center" width="150" height="30" style="background-color:#FFCC22; font-size:16px;">
                                                        <b>column 6</b>
                                                </th>
                                               
                                                <th id="detail_title01" align="center" width="150" height="30" style="background-color:#FFCC22; font-size:16px; display:none">
                                                        <b>column 7</b>
                                                </th>
                                                <th id="detail_title02" align="center" width="150" height="30" style="background-color:#FFCC22; font-size:16px; display:none">
                                                        <b>column 8</b>
                                                </th>
                                                <th id="detail_title03" align="center" width="150" height="30" style="background-color:#FFCC22; font-size:16px; display:none">
                                                        <b>column 9</b>
                                                </th>
                                        </tr>
                                </thead>

                                <tbody>
                                        <%Iterator itr;%>
                                        <%
                                                List data= (List)request.getAttribute("data");
                                                if(data == null){
                                                }else{
                                                        for (itr=data.iterator(); itr.hasNext(); )  
                                                {  
                                        %>
                                        <tr>  
                                                <td align="center" height="25" style="font-size:14px"><%=itr.next()%></td>  
                                                <td align="center" height="25" style="font-size:14px"><%=itr.next()%></td>
                                                <td align="center" height="25" style="font-size:14px"><%=itr.next()%></td>  
                                                <td align="center" height="25" style="font-size:14px"><%=itr.next()%></td>
                                                <td align="center" height="25" style="font-size:14px"><%=itr.next()%></td>
                                                <td align="center" height="25" style="font-size:14px"><%=itr.next()%></td>
                                                <td class="detail01" align="center" height="25" style="font-size:14px; display:none"><%=itr.next()%></td>
                                                <td class="detail02" align="center" height="25" style="font-size:14px; display:none"><%=itr.next()%></td>   
                                                <td class="detail03" align="center" height="25" style="font-size:14px; display:none"><%=itr.next()%></td>   
                                        </tr>  
                                        <%}}%>
                                </tbody>
                        </table>
</body>

返回列表 回復 發帖