jquery table

发布时间:2016-11-02 16:17:20 阅读:1016次
转:http://blog.csdn.net/newyear1988/article/details/7402593
<html>
<body>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/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); //设置为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>

如有问题,可以QQ搜索群1028468525加入群聊,欢迎一起研究技术

支付宝 微信

有疑问联系站长,请联系QQ:QQ咨询

转载请注明:jquery table 出自老鄢博客 | 欢迎分享