jquery实现效果比较好的table选中行颜色


Posted in Javascript onMarch 25, 2014

jquery table选中行颜色(效果更好)

<html> 
<head> 
<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>

js代码:
<script type="text/javascript" src="jquery-1.6.4.js"></script> 
<script> 
$(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'); 
}); 
}); 
}); 
</script>

效果显示:
jquery实现效果比较好的table选中行颜色
Javascript 相关文章推荐
js 发个判断字符串是否为符合标准的函数
Apr 27 Javascript
深入理解JavaScript系列(2) 揭秘命名函数表达式
Jan 15 Javascript
js实现在文本框光标处添加字符的方法介绍
Nov 24 Javascript
从jquery的过滤器.filter()方法想到的
Sep 29 Javascript
Web打印解决方案之证件套打的实现思路
Aug 29 Javascript
jquery 实时监听输入框值变化的完美方法(必看)
Jan 26 Javascript
JS实现的DIV块来回滚动效果示例
Feb 07 Javascript
浅谈js函数三种定义方式 &amp; 四种调用方式 &amp; 调用顺序
Feb 19 Javascript
Node.js中看JavaScript的引用
Apr 22 Javascript
Angular设置别名alias的方法
Nov 08 Javascript
快速搭建Node.js(Express)用户注册、登录以及授权的方法
May 09 Javascript
uni-app 微信小程序授权登录的实现步骤
Feb 18 Javascript
Jquery对数组的操作技巧整理
Mar 25 #Javascript
常用的几段javascript代码分享
Mar 25 #Javascript
捕获和分析JavaScript Error的方法
Mar 25 #Javascript
Jquery validation remote 验证的缓存问题解决方法
Mar 25 #Javascript
js操作输入框提示信息且响应鼠标事件
Mar 25 #Javascript
jquery动态更换设置背景图的方法
Mar 25 #Javascript
jquery队列queue与原生模仿其实现方法分享
Mar 25 #Javascript
You might like
php auth_http类库进行身份效验
2009/03/19 PHP
JQuery中dataGrid设置行的高度示例代码
2014/01/03 Javascript
JS将光标聚焦在文本最后的实现代码
2014/03/28 Javascript
javascript实现验证身份证号的有效性并提示
2015/04/30 Javascript
使用Jasmine和Karma对AngularJS页面程序进行测试
2016/03/05 Javascript
后端接收不到AngularJs中$http.post发送的数据原因分析及解决办法
2016/07/05 Javascript
ES6解构赋值实例详解
2017/10/31 Javascript
vue 添加vux的代码讲解
2017/11/30 Javascript
关于vue中的ajax请求和axios包问题
2018/04/19 Javascript
在vue2.0中引用element-ui组件库的方法
2018/06/21 Javascript
vue2.0移动端滑动事件vue-touch的实例代码
2018/11/27 Javascript
微信小程序实现的一键连接wifi功能示例
2019/04/24 Javascript
浅谈一种让小程序支持JSX语法的新思路
2019/06/16 Javascript
JS实现滑动导航效果
2020/01/14 Javascript
angular中的post请求处理示例详解
2020/06/30 Javascript
antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作
2020/08/06 Javascript
关于ES6尾调用优化的使用
2020/09/11 Javascript
[01:00:17]DOTA2-DPC中国联赛 正赛 SAG vs Dynasty BO3 第二场 1月25日
2021/03/11 DOTA
怎样使用Python脚本日志功能
2016/08/14 Python
Python编程实现两个文件夹里文件的对比功能示例【包含内容的对比】
2017/06/20 Python
Pandas实现数据类型转换的一些小技巧汇总
2018/05/07 Python
Python把csv数据写入list和字典类型的变量脚本方法
2018/06/15 Python
Python for循环中的陷阱详解
2018/07/13 Python
用Python shell简化开发
2018/08/08 Python
python在html中插入简单的代码并加上时间戳的方法
2018/10/16 Python
简单的Python调度器Schedule详解
2019/08/30 Python
pytorch 指定gpu训练与多gpu并行训练示例
2019/12/31 Python
爱他美官方海外旗舰店:Aptamil奶粉
2017/12/22 全球购物
英国家居装饰品、户外家具和玻璃器皿购物网站:Rinkit.com
2019/11/04 全球购物
医学专业毕业生推荐信
2013/11/14 职场文书
超市开学活动方案
2014/03/01 职场文书
中秋晚会策划方案
2014/06/12 职场文书
教师自荐信范文
2015/03/06 职场文书
捐书活动倡议书
2015/04/27 职场文书
荒岛余生观后感
2015/06/09 职场文书
户外拓展训练感想
2015/08/07 职场文书