jQuery實現(xiàn)table列的隱藏和展示
<html>
<body>
<script language="javascript" src="./jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("td:eq(2)",$("tr")).hide();
$("td:eq(3)",$("tr")).hide();
$("td:eq(4)",$("tr")).hide();
$("#button1").click(function(){
$("td:eq(2)",$("tr")).toggle(1000); //設(shè)置為0表示不用動畫 ，1000就1秒的時間來展示或者隱藏
$("td:eq(3)",$("tr")).toggle(1000);
$("td:eq(4)",$("tr")).toggle(1000);
});
});
</script>
<input type="button" id="button1" value="隱藏/顯示后三列"/>
<table id="mytable" border="1" cellpadding="0"
cellspacing="0" bordercolor="#a3b0dc" style="border-collapse:collapse;">
<tr >
<td width="200">第一列</td>
<td width="200">第二列</td>
<td width="200">第三列</td>
<td width="200">第四列</td>
<td width="200">第五列</td>
</tr>
<tr><td>id</td><td>id1</td><td>id2</td><td>id3</td><td>id4</td></tr>
<tr><td>id</td><td>id1</td><td>id2</td><td>id3</td><td>id4</td></tr>
<tr><td>id</td><td>id1</td><td>id2</td><td>id3</td><td>id4</td></tr>
<tr><td>id</td><td>id1</td><td>id2</td><td>id3</td><td>id4</td></tr>
<tr><td>id</td><td>id1</td><td>id2</td><td>id3</td><td>id4</td></tr>
</table>
</body>
</html>信息科技 2020-04-11 12:43:44 通過 網(wǎng)頁 瀏覽(3248) 打印