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 相关文章推荐
Prototype 工具函数 学习
Jul 23 Javascript
jquery 锁定弹出层实现代码
Feb 23 Javascript
JS实现当前页居中分页效果的方法
Jun 18 Javascript
使用JavaScript的AngularJS库编写hello world的方法
Jun 23 Javascript
基于jquery实现人物头像跟随鼠标转动
Aug 23 Javascript
setTimeout学习小结
Feb 08 Javascript
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
Apr 17 jQuery
微信小程序实现聊天对话(文本、图片)功能
Jul 06 Javascript
解决Layui数据表格的宽高问题
Sep 28 Javascript
vue实现输入框自动跳转功能
May 20 Javascript
vue-axios同时请求多个接口 等所有接口全部加载完成再处理操作
Nov 09 Javascript
关于javascript中的promise的用法和注意事项(推荐)
Jan 15 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
小程序微信退款功能实现方法详解【基于thinkPHP】
2019/05/05 PHP
使用Entrust扩展包在laravel 中实现RBAC的功能
2020/03/16 PHP
js 匿名调用实现代码
2009/06/19 Javascript
让JavaScript 轻松支持函数重载 (Part 1 - 设计)
2009/08/04 Javascript
Javascript 复制数组实现代码
2009/11/26 Javascript
JQuery 构建客户/服务分离的链接模型中Table中的排序分析
2010/01/22 Javascript
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(下:动画篇)
2010/03/24 Javascript
JavaScript中的this关键字介绍与使用实例
2013/06/21 Javascript
使用upstart把nodejs应用封装为系统服务实例
2014/06/01 NodeJs
使用jQuery+EasyUI实现CheckBoxTree的级联选中特效
2015/12/06 Javascript
jQuery中$.ajax()方法参数解析
2016/10/22 Javascript
js编写三级联动简单案例
2016/12/21 Javascript
security.js实现的RSA加密功能示例
2018/06/06 Javascript
我要点爆”微信小程序云开发之项目建立与我的页面功能实现
2019/05/26 Javascript
vue prop属性传值与传引用示例
2019/11/13 Javascript
详细解析Python当中的数据类型和变量
2015/04/25 Python
python中pygame针对游戏窗口的显示方法实例分析(附源码)
2015/11/11 Python
set在python里的含义和用法
2019/06/24 Python
python原类、类的创建过程与方法详解
2019/07/19 Python
Python安装依赖(包)模块方法详解
2020/02/14 Python
Python pandas对excel的操作实现示例
2020/07/21 Python
Python3爬虫关于代理池的维护详解
2020/07/30 Python
vscode+PyQt5安装详解步骤
2020/08/12 Python
HTML5 标准将把互联网视频扔回到黑暗时代
2010/02/10 HTML / CSS
澳大利亚汽车零部件、音响及配件超市:Automotive Superstore
2018/06/19 全球购物
俄罗斯披萨、寿司和面食送货到家服务:2 Берега
2019/12/15 全球购物
如何清空Session
2015/02/23 面试题
艾滋病宣传活动总结
2014/05/08 职场文书
新党章心得体会
2014/09/04 职场文书
2014年销售员工作总结
2014/12/01 职场文书
宇宙与人观后感
2015/06/05 职场文书
施工安全协议书
2016/03/22 职场文书
python批量更改目录名/文件名的方法
2021/04/18 Python
Vue vee-validate插件的简单使用
2021/06/22 Vue.js
Redis入门教程详解
2021/08/30 Redis
Java 垃圾回收超详细讲解记忆集和卡表
2022/04/08 Java/Android