jquery+css实现表格隔行换色、荧光棒特效、复选框checkbox全选反选效果 -

xinklabi

浏览: 1587054 次
性别:
来自: 吉林

最近访客更多访客>>

jamsbone

bbls

netbuddy

rx78liuliu

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

jquery+css实现表格隔行换色、荧光棒特效、复选框checkbox全选反选效果

博客分类：

其它

<script type="text/javascript">
$(function(){
	$("table tr:even").addClass("tdOdd");
	$("th:first").css("background","#B4C6C1");//首个
	$("table tr").mouseover(function(){
	$(this).addClass("tdOver");}).mouseout(function(){
		$(this).removeClass("tdOver");}).click(function(){//荧光棒
			$(".tdClick").removeClass("tdClick");$(this).addClass("tdClick");
		})//行锁定  
	$("input:checkbox:first").click(function(){
		$("input:checkbox:not(input:checkbox:first)").each(function(){//剔除本身
			$(this).attr(  "checked",$("input:checkbox:first").attr("checked"));
		})  
	})  
	$("input:checkbox:not(input:checkbox:first)").click(function(){
		var flag=true;  
		$("input:checkbox:not(input:checkbox:first)").each(function(){
			if(!this.checked){flag=false;}//不可使用if($(this).attr("checked","false")){flag=false;}<P></P>
		});
		$("input:checkbox:first").attr("checked",flag);
	})  
  });
  </script>
  <style type="text/css">
  body{
  font-size:12px;
  color:#366;
  }
  table{
  border:none;
  background:#fefefe;
  width:100%;
  border-collapse:collapse;
  }
  th{
  background:#CFDEC6;
  padding:4px;
  color:#000;
  }
  td,.tdNormal{
  border:#cfdec6   solid   1px;
  padding:4px;
  background:fefefe;
  }
  .tdOdd{
  background:#f1fefa;
  }
  .tdOver{
  background:#F5FAF7;
  }
  </style>
  </head>
  <body>
  <table>
  <tr>
	  <th>姓名</th>
	  <th>年龄</th>
	  <th>专业</th>
  </tr>
  <tr>
	  <td>王洪剑</td>
	  <td>22</td>
	  <td>电气自动化</td>
  </tr>
  <tr>
	  <td>李川川</td>
	  <td>20</td>
	  <td>计算机</td>
  </tr>
  <tr>
	  <td>陈超</td>
	  <td>22</td>
	  <td>计算机</td>
  </tr>
  <tr>
	  <td>秦玉龙</td>
	  <td>21</td>
	  <td>计算机</td>
  </tr>
  <tr>
	  <td>刘威</td>
	  <td>21</td>
	  <td>计算机</td>
  </tr>
  <tr>
	  <td>张会会</td>
	  <td>21</td>
	  <td>计算机</td>
  </tr>
  <tr>
	  <td>胡海生</td>
	  <td>30</td>
	  <td>计算机</td>
  </tr>
  <tr>
	  <td>吴雄</td>
	  <td>22</td>
	  <td>计算机</td>
  </tr>
</table>

分享到：

spring tx:advice 和 aop:config 配置事务 | jquery操作css

2012-06-08 17:31
浏览 1944
评论(0)
分类:Web前端
查看更多

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jquery+css实现表格隔行换色、荧光棒特效、复选框checkbox全选反选效果

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jquery+css实现表格隔行换色、荧光棒特效、复选框checkbox全选反选效果

评论

发表评论

相关推荐

Java软件工程师就业思维图(2016年版)

如何卸载百度安全卫士（其它杀毒软件使用同样方法）

easyBCD(系统引导软件）简介及引导安装Ubuntu14.04

银行家算法（避免死锁的算法）

FindBugs简介(检查代码质量问题的工具，可以集成到Eclipse中)

按键盘的删除键导致网页后退的问题

趣味数学（各大经典数学问题）

元数据驱动的应用程序设计和开发

怎样创建FTP服务器

Comet：基于 HTTP 长连接的“服务器推”技术

使用仓库管理器——Sonatype Nexus的九大理由

Windows下主机名和IP映射设置

Sonatype Nexus以war包形式部署时始终报错，最后由此文章发现线索得以解决（还得靠google啊）

IMIX简介

想成为管理者，你得具备什么，请参看

常见端口详解，可能攻击和防御策略

windows远程桌面与本机互相复制文件的方法

XP服务详解

JBPM工作流引擎介绍（一）

JBPM工作流引擎介绍

最近访客更多访客>>