jQuery实现HTML表格隔行变色及鼠标悬停变色效果 .

 

以下代码实现效果：1.表格隔行变色。2.鼠标悬停在表格行上时变色。

一：在页面内引入jquery.js。我使用的是jquery-1.6.min.js。

二：加入如下js代码

 

<script type="text/javascript">//隔行变色$(document).ready(function(){ $(".stripe_tb tr").mouseover(function(){ //如果鼠标移到class为stripe_tb的表格的tr上时，执行函数 $(this).addClass("over");}).mouseout(function(){ //给这行添加class值为over，并且当鼠标一出该行时执行函数 $(this).removeClass("over");}) //移除该行的class $(".stripe_tb tr:even").addClass("alt"); //给class为stripe_tb的表格的偶数行添加class值为alt});    </script>

三：添加如下CSS样式表

01./*注意选择器的层叠关系*/  02..stripe_tb tr.alt td{background:#ecf6fc} /*这行将给所有偶数行加上背景色*/  03..stripe_tb tr.over td{background:#FEF3D1} /*这个将是鼠标高亮行的背景色  
 
四：给对应表格<table>标签加上class="stripe_tb"属性 
	
				
	
					   
jQuery实现HTML表格隔行变色及鼠标悬停变色效果
	  	   
jQuery实现HTML表格隔行变色及鼠标悬停变色效果 .
	  	   
JQuery实现table隔行变色及鼠标滑动变色
	  	   
jquery 实现表格隔行变色
	  	   
jQuery实现表格隔行变色
	  	   
jquery实现隔行变色效果
	  	   
jquery实现隔行变色，点击换色，鼠标悬浮当前行变色效果,div+css 细表格样式
	  	   
jQuery实现table表格隔行换色鼠标经过变色
	  	   
jQuery实现table表格隔行换色鼠标经过变色
	  	   
表格效果（隔行变色，鼠标划上变色）
	  	   
jquery表格隔行变色
	  	   
实现表格隔行变色
	  	   
jquery实现鼠标悬停单元格变色
	  	   
jquery实现表格的隔行变色
	  	   
用jquery实现表格的隔行变色
	  	   
用jQuery实现表格的隔行变色
	  	   
jquery实现表格的隔行变色
	  	   
jQuery轻松实现表格的隔行变色，点击行变色
	     		  
	  	   
user profile service服务未能登陆,无法加载用户配置文件
	  	   
java JDK版本切换
	  	   
病毒式传播的八种方式
	  	   
Hadoop MapReduce 学习笔记(二) 序言和准备2
	  	   
istream_iterator绑定到cin流上后怎样结束输入
	  	   
jQuery实现HTML表格隔行变色及鼠标悬停变色效果 .
	  	   
asp.net界面传值的简单加密和解密算法
	  	   
informix:脏读导致死锁处理
	  	   
CentOS 6 下虚拟机配置
	  	   
使用C++实现SDK之WebBrowser容器
	  	   
Linux - one command per day--cd
	  	   
c#的Winform开发小技巧集锦（一）
	  	   
手持嵌入式wince6.0串口通信调试
	  	   
年终总结