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 相关文章推荐
JavaScript高级程序设计阅读笔记(六) ECMAScript中的运算符(二)
Feb 27 Javascript
为什么要在引入的css或者js文件后面加参数的详细讲解
May 03 Javascript
jQuery on方法传递参数示例
Dec 09 Javascript
JavaScript实现网页加载进度条代码超简单
Sep 21 Javascript
超详细的javascript数组方法汇总
Nov 21 Javascript
理解JavaScript事件对象
Jan 25 Javascript
Vue-cli3项目配置Vue.config.js实战记录
Jul 29 Javascript
Vue 样式绑定的实现方法
Jan 15 Javascript
详解javascript设计模式三:代理模式
Mar 25 Javascript
微信小程序mpvue点击按钮获取button值的方法
May 29 Javascript
js实现适配移动端的拖动效果
Jan 13 Javascript
关于Javascript闭包与应用的详解
Apr 22 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的开发框架的现状和展望
2007/03/16 PHP
PHP 文件写入和读取操作实例详解【必看篇】
2019/11/04 PHP
javascript jQuery插件练习
2008/12/24 Javascript
JavaScript入门教程(9) Document文档对象
2009/01/31 Javascript
javascript实现的像java、c#之类的sleep暂停的函数代码
2010/03/04 Javascript
编写Js代码要注意的几条规则
2010/09/10 Javascript
jQuery UI AutoComplete 使用说明
2011/06/20 Javascript
jQuery语法高亮插件支持各种程序源代码语法着色加亮
2013/04/27 Javascript
document.write()及其输出内容的样式、位置控制
2013/08/12 Javascript
js特殊字符转义介绍
2013/11/05 Javascript
iframe实用操作锦集
2014/04/22 Javascript
JS实现的数组全排列输出算法
2015/03/19 Javascript
在JavaScript中访问字符串的子串
2015/07/07 Javascript
javascript动态获取登录时间和在线时长
2016/02/25 Javascript
AngularJS基础 ng-switch 指令简单示例
2016/08/03 Javascript
js实现按座位号抽奖
2017/04/05 Javascript
vue.js删除列表中的一行
2018/06/30 Javascript
js+canvas实现两张图片合并成一张图片的方法
2019/11/01 Javascript
python使用win32com库播放mp3文件的方法
2015/05/30 Python
Python简单连接MongoDB数据库的方法
2016/03/15 Python
基于Django的python验证码(实例讲解)
2017/10/23 Python
python语言中with as的用法使用详解
2018/02/23 Python
详解python爬虫系列之初识爬虫
2019/04/06 Python
Python实现网页截图(PyQT5)过程解析
2019/08/12 Python
英国第二大营养品供应商:Vitabiotics
2016/10/01 全球购物
意大利领先的线上奢侈品销售电商:Eleonora Bonucci
2017/10/17 全球购物
New Balance天猫官方旗舰店:始于1906年,百年慢跑品牌
2017/11/15 全球购物
网站域名和主机:Domain.com
2019/04/01 全球购物
Book Depository美国:全球领先的专业网上书店之一
2019/08/14 全球购物
华为慧通面试题
2012/09/11 面试题
年度献血先进个人事迹材料
2014/02/14 职场文书
商业门面租房协议书
2014/11/25 职场文书
信贷客户经理岗位职责
2015/04/09 职场文书
php 解析非标准json、非规范json
2021/04/01 PHP
JS不要再到处使用绝对等于运算符了
2021/04/30 Javascript
JavaScript实现简单拖拽效果
2021/09/15 Javascript