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


Posted in Javascript onAugust 28, 2013

Jquery 实现表格颜色交替变化,点击选中行,鼠标移过颜色变化效果图如下:
源码(Demo)打包下载Jquery 实现表格颜色交替变化鼠标移过颜色变化实例 
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'); 
}); 
}); 
});
Javascript 相关文章推荐
JQuery textlimit 显示用户输入的字符数 限制用户输入的字符数
May 14 Javascript
javascript getElementsByName()的用法说明
Jul 31 Javascript
限制textbox或textarea输入字符长度的JS代码
Oct 16 Javascript
javascript中的if语句使用介绍
Nov 20 Javascript
无闪烁更新网页内容JS实现
Dec 19 Javascript
使用JavaScript进行进制转换将字符串转换为十进制
Sep 21 Javascript
三个js循环的关键字示例(for与while)
Feb 16 Javascript
微信小程序 Audio API详解及实例代码
Sep 30 Javascript
angular5 httpclient的示例实战
Mar 12 Javascript
node.js中 redis 的安装和基本操作示例
Feb 10 Javascript
node.js中path路径模块的使用方法实例分析
Feb 13 Javascript
如何基于filter实现网站整体变灰功能
Apr 17 Javascript
Jquery仿淘宝京东多条件筛选可自行结合ajax加载示例
Aug 28 #Javascript
Jquery Uploadify多文件上传带进度条且传递自己的参数
Aug 28 #Javascript
ExtJS DOM元素操作经验分享
Aug 28 #Javascript
地址栏传递中文参数乱码在js里用escape转码
Aug 28 #Javascript
在JavaScript中实现类的方式探讨
Aug 28 #Javascript
实用的Jquery选项卡TAB示例代码
Aug 28 #Javascript
jQuery实现图片信息的浮动显示实例代码
Aug 28 #Javascript
You might like
PHP获取网址的顶级域名函数代码
2012/09/24 PHP
PHP导航下拉菜单的实现如此简单
2013/09/22 PHP
php实现数组中出现次数超过一半的数字的统计方法
2018/10/14 PHP
laravel框架中表单请求类型和CSRF防护实例分析
2019/11/23 PHP
jQuery实战之仿淘宝商城左侧导航效果
2011/04/12 Javascript
JS和jquery获取各种屏幕的宽度和高度的代码
2013/08/02 Javascript
JS+CSS实现六级网站导航主菜单效果
2015/09/28 Javascript
微信JSSDK调用微信扫一扫功能的方法
2017/07/25 Javascript
vue-resource + json-server模拟数据的方法
2017/11/02 Javascript
React Native中NavigatorIOS组件的简单使用详解
2018/01/27 Javascript
element中el-container容器与div布局区分详解
2020/05/13 Javascript
Python中datetime常用时间处理方法
2015/06/15 Python
python编程开发之日期操作实例分析
2015/11/13 Python
最近Python有点火? 给你7个学习它的理由!
2017/06/26 Python
python将list转为matrix的方法
2018/12/12 Python
Python3 pip3 list 出现 DEPRECATION 警告的解决方法
2019/02/16 Python
详解Python locals()的陷阱
2019/03/26 Python
浅谈python多进程共享变量Value的使用tips
2019/07/16 Python
python使用百度文字识别功能方法详解
2019/07/23 Python
Python while true实现爬虫定时任务
2020/06/08 Python
python调用私有属性的方法总结
2020/07/24 Python
深入了解Python装饰器的高级用法
2020/08/13 Python
python实现录制全屏和选择区域录屏功能
2021/02/05 Python
html5 canvas 使用示例
2010/10/22 HTML / CSS
Carolina Lemke Berlin澳大利亚官网:时尚太阳镜品牌
2019/09/17 全球购物
EJB实例的生命周期
2016/10/28 面试题
电子商务专业实习生自我鉴定
2013/09/24 职场文书
机关门卫的岗位职责
2014/04/29 职场文书
说明书范文
2014/05/07 职场文书
应届生面试求职信
2014/07/02 职场文书
优质服务标语口号
2015/12/26 职场文书
浅谈:电影《孔子》观后感(范文)
2019/10/14 职场文书
Python音乐爬虫完美绕过反爬
2021/08/30 Python
利用JavaScript写一个简单计算器
2021/11/27 Javascript
十大最强水系宝可梦,最美宝可梦排第三,榜首大家最熟悉
2022/03/18 日漫
Innodb存储引擎中的后台线程详解
2022/04/03 MySQL