Jquery 实现表格颜色交替变化鼠标移过颜色变化实例

更新时间：2013年08月28日 16:52:38 作者：

Jquery 实现表格颜色交替变化，点击选中行，鼠标移过颜色变化效果附演示代码，喜欢的朋友可以参考下

Jquery 实现表格颜色交替变化，点击选中行，鼠标移过颜色变化效果图如下：
源码（Demo）打包下载

html代码如下：

 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> 
<script type="text/javascript" src="table-row-1.0.js"></script> 
<style type="text/css"> 
.table-tr-title{ 
height: 26px; 
font-size: 12px; 
text-align: center; 
} 
.table-tr-content{ 
height: 18px; 
background: #FFFFFF; 
text-align: center; 
font-size: 12px; 
} 
.normalEvenTD{ 
background: #DFD8D8; 
} 
.normalOddTD{ 
background: #FFFFFF; 
} 
.hoverTD{ 
background-color: #eafcd5; 
height: 18px; 
text-align: center; 
font-size: 12px; 
} 
.trSelected{ 
background-color: #51b2f6; 
height: 18px; 
text-align: center; 
font-size: 12px; 
} 
</style> 
</head> 
<body> 
<table width="99%" class="list" style="word-break: break-all" border="0" 
align="center" cellpadding="0" cellspacing="1" bgcolor="#c0de98"> 
<tr class="table-tr-title"> 
<td width="5%">标题</td> 
<td width="5%">标题</td> 
<td width="5%">标题</td> 
<td width="5%">标题</td> 
</tr> 
<tr class="table-tr-content"> 
<td width="5%">数据</td> 
<td width="5%">数据</td> 
<td width="5%">数据</td> 
<td width="5%">数据</td> 
</tr> 
<tr class="table-tr-content"> 
<td width="5%">数据</td> 
<td width="5%">数据</td> 
<td width="5%">数据</td> 
<td width="5%">数据</td> 
</tr> 
<tr class="table-tr-content"> 
<td width="5%">数据</td> 
<td width="5%">数据</td> 
<td width="5%">数据</td> 
<td width="5%">数据</td> 
</tr> 
<tr class="table-tr-content"> 
<td width="5%">数据</td> 
<td width="5%">数据</td> 
<td width="5%">数据</td> 
<td width="5%">数据</td> 
</tr> 
<tr class="table-tr-content"> 
<td width="5%">数据</td> 
<td width="5%">数据</td> 
<td width="5%">数据</td> 
<td width="5%">数据</td> 
</tr> 
<tr class="table-tr-content"> 
<td width="5%">数据</td> 
<td width="5%">数据</td> 
<td width="5%">数据</td> 
<td width="5%">数据</td> 
</tr> 
<tr class="table-tr-content"> 
<td width="5%">数据</td> 
<td width="5%">数据</td> 
<td width="5%">数据</td> 
<td width="5%">数据</td> 
</tr> 
<tr class="table-tr-content"> 
<td width="5%">数据</td> 
<td width="5%">数据</td> 
<td width="5%">数据</td> 
<td width="5%">数据</td> 
</tr> 
<tr class="table-tr-content"> 
<td width="5%">数据</td> 
<td width="5%">数据</td> 
<td width="5%">数据</td> 
<td width="5%">数据</td> 
</tr> 
<tr class="table-tr-content"> 
<td width="5%">数据</td> 
<td width="5%">数据</td> 
<td width="5%">数据</td> 
<td width="5%">数据</td> 
</tr> 
<tr class="table-tr-content"> 
<td width="5%">数据</td> 
<td width="5%">数据</td> 
<td width="5%">数据</td> 
<td width="5%">数据</td> 
</tr> 
<tr class="table-tr-content"> 
<td width="5%">数据</td> 
<td width="5%">数据</td> 
<td width="5%">数据</td> 
<td width="5%">数据</td> 
</tr> 
</body> 
</html> 

table-row-1.0.js

复制代码代码如下:

 
$(document).ready(function(){ 
///////datagrid选中行变色与鼠标经过行变色/////////////// 
var dtSelector = ".list"; 
var tbList = $(dtSelector); 

tbList.each(function() { 
var self = this; 
$("tr:even:not(:first)", $(self)).addClass("normalEvenTD"); // 从标头行下一行开始的奇数行，行数：（1，3，5...） 
$("tr:odd", $(self)).addClass("normalOddTD"); // 从标头行下一行开始的偶数行，行数：（2，4，6...） 

// 鼠标经过的行变色 
$("tr:not(:first)", $(self)).hover( 
function () { $(this).addClass('hoverTD');$(this).removeClass('table-td-content'); }, 
function () { $(this).removeClass('hoverTD');$(this).addClass('table-td-content'); } 
); 

// 选择行变色 
$("tr", $(self)).click(function (){ 
var trThis = this; 
$(self).find(".trSelected").removeClass('trSelected'); 
if ($(trThis).get(0) == $("tr:first", $(self)).get(0)){ 
return; 
} 
$(trThis).addClass('trSelected'); 
}); 
}); 
}); 

您可能感兴趣的文章:

jQuery自定义事件的简单实现代码
本篇文章只要是对jQuery自定义事件的简单实现代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2014-01-01
基于jquery实现图片广告轮换效果代码
基于jquery实现图片广告轮换效果代码，需要的朋友可以参考下。
2011-07-07
jQuery实现简单隔行变色的方法
这篇文章主要介绍了jQuery实现简单隔行变色的方法,涉及jQuery针对页面元素样式的相关操作技巧,需要的朋友可以参考下
2016-02-02
JQuery中使用.each()遍历元素学习笔记
这篇文章主要介绍了jquery中使用.each()遍历元素学习笔记,本文从实际项目经验总结而来,需要的朋友可以参考下
2014-11-11
豆瓣网的jquery代码实例
豆瓣网的jquery实例代码，效果不错，方便大家学习
2008-06-06
Javascript jquery css 写的简单进度条控件
很多的时候用户需要等待你“臃肿”的 Javascript 代码处理完成（Web 2.0 的特色）。期间或许加入一个类似于进度条的东西让用户有点“安慰”。这个东西实现起来并不复杂，无非就是获得总的处理条目，然后获得一个百分比，再显示输出。
2008-03-03
基于jquery的监控数据是否发生改变
在实际开发中经常会遇到数据没发生改变是，由于用户不小心点击保存，这样导致数据库的日志增大；还有数据填写好后，忘了添加保存直接关闭页面离开。
2011-04-04
jQuery ajax时间差导致的变量赋值问题分析
这篇文章主要介绍了jQuery ajax时间差导致的变量赋值问题,结合实例对比分析了jQuery的ajax调用中出现的时间差赋值问题原因与解决方法,需要的朋友可以参考下
2016-01-01
jQuery中fadeOut()方法用法实例
这篇文章主要介绍了jQuery中fadeOut()方法用法,以实例形式分析了fadeOut()方法的功能、定义及具体使用技巧,具有一定的参考借鉴价值,需要的朋友可以参考下
2014-12-12
jquery popupDialog 使用加载jsp页面的方法
下面小编就为大家带来一篇jquery popupDialog 使用加载jsp页面的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-10-10