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 相关文章推荐
javascript hashtable实现代码
Oct 13 Javascript
JQuery Tips(3) 关于$()包装集内元素的改变
Dec 14 Javascript
ajax更新数据后,jquery、jq失效问题
Mar 16 Javascript
Bootstrap每天必学之按钮
Nov 26 Javascript
Jqprint实现页面打印
Jan 06 Javascript
很棒的vue弹窗组件
May 24 Javascript
基于JavaScript+HTML5 实现打地鼠小游戏逻辑流程图文详解(附完整代码)
Nov 02 Javascript
Angular CLI 使用教程指南参考小结
Apr 10 Javascript
vue component 中引入less文件报错 Module build failed
Apr 17 Javascript
Node.js一行代码实现静态文件服务器的方法步骤
May 07 Javascript
Vue中axios的封装(报错、鉴权、跳转、拦截、提示)
Aug 20 Javascript
jQuery实现全选按钮
Jan 01 jQuery
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
短波问题解答
2021/02/28 无线电
php 页面执行时间计算代码
2008/12/04 PHP
PHP开发不能违背的安全规则 过滤用户输入
2011/05/01 PHP
php中将汉字转换成拼音的函数代码
2012/09/08 PHP
PHP+MYSQL实现用户的增删改查
2015/03/24 PHP
php修改文件上传限制方法汇总
2015/04/07 PHP
基于jquery实现控制经纬度显示地图与卫星
2013/05/20 Javascript
JQuery筛选器全系列介绍
2013/08/27 Javascript
JQuery EasyUI 加载两次url的原因分析及解决方案
2014/08/18 Javascript
JavaScript函数详解
2014/11/17 Javascript
JS阻止事件冒泡行为和闭包的方法
2016/06/16 Javascript
微信JS-SDK坐标位置如何转换为百度地图坐标
2016/07/04 Javascript
浅谈jQuery效果函数
2016/09/16 Javascript
微信小程序 实战程序简易新闻的制作
2017/01/09 Javascript
js控制一个按钮是否可点击(可使用)disabled的实例
2017/02/14 Javascript
VUE使用vuex解决模块间传值问题的方法
2017/06/01 Javascript
JavaScript仿微信(电话)联系人列表滑动字母索引实例讲解(推荐)
2017/08/16 Javascript
基于zepto.js实现登录界面
2017/10/09 Javascript
详解vue-router 命名路由和命名视图
2018/06/01 Javascript
小程序如何获取多个formId实现详解
2019/09/20 Javascript
js实现踩五彩块游戏
2020/02/08 Javascript
Node Express用法详解【安装、使用、路由、中间件、模板引擎等】
2020/05/13 Javascript
[06:45]DOTA2卡尔工作室 英雄介绍幻影长矛手篇
2013/07/12 DOTA
[01:00:53]OG vs IG 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python socket 超时设置 errno 10054
2014/07/01 Python
用Python实现一个简单的能够上传下载的HTTP服务器
2015/05/05 Python
python批量替换页眉页脚实例代码
2018/01/22 Python
python opencv 图像尺寸变换方法
2018/04/02 Python
python判断单向链表是否包括环,若包含则计算环入口的节点实例分析
2019/10/23 Python
10分钟入门CSS3 Animation
2018/12/25 HTML / CSS
函授本科自我鉴定
2014/02/04 职场文书
化妆品店促销方案
2014/02/24 职场文书
排查整治工作方案
2014/06/09 职场文书
公司法定代表人授权委托书
2014/09/29 职场文书
高三毕业评语
2014/12/31 职场文书
中学政教处工作总结
2015/08/13 职场文书