`
pipe
  • 浏览: 205240 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

jquery入门之动态隐藏显示列

jQuery 
阅读更多
首先 去下载一个jquery.js.
其他看代码吧： 
<body>

<script language="javascript" src="./script/jquery.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>


首先是页面一进来就隐藏后面三列， 通过点击按钮，来控制后三列的隐藏与显示。
$("td:eq(2)",$("tr")).toggle(0); 表示所有的tr中 第3个td隐藏
分享到：
| 用annotation来配置spring2.5+hibernate3 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics