jQuery fadeIn 與 fadeOut問題
版上各位大大好~我是jQuery新手，以下有個問題想請教一下版上的各位大大
由於我從DB撈出來的資料量比較多，又不想讓USER翻頁
所以使用網路上dataTable(官方網頁：[url]http://www.datatables.net/[/url])這個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> 你可以改用官方提供的方法來做…請參考：
[url]http://www.datatables.net/examples/basic_init/hidden_columns.html[/url]
頁:
[1]