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 14 Javascript
jquery 滚动条事件简单实例
Jul 12 Javascript
AngularJS语法详解
Jan 23 Javascript
javascript动态添加删除tabs标签的方法
Jul 06 Javascript
jQuery Checkbox 全选 反选的简单实例
Nov 29 Javascript
认识less和webstrom的less配置方法
Aug 02 Javascript
关于Promise 异步编程的实例讲解
Sep 01 Javascript
Vue 项目代理设置的优化
Apr 17 Javascript
vue路由组件按需加载的几种方法小结
Jul 12 Javascript
深入解析koa之中间件流程控制
Jun 17 Javascript
vue实现短信验证码输入框
Apr 17 Javascript
JavaScript实现放大镜效果代码示例
Apr 29 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入门
2006/10/09 PHP
定义php常量的详解
2013/06/09 PHP
PHP生成短网址的3种方法代码实例
2014/07/08 PHP
php实现的微信红包算法分析(非官方)
2015/09/25 PHP
PHP htmlspecialchars_decode()函数用法讲解
2019/03/01 PHP
js chrome浏览器判断代码
2010/03/28 Javascript
JavaScript高级程序设计 阅读笔记(十二) js内置对象Math
2012/08/14 Javascript
JS二维数组的定义说明
2014/03/03 Javascript
jQuery及JS实现循环中暂停的方法
2015/02/02 Javascript
轻松实现jquery手风琴效果
2016/01/14 Javascript
BootStrapTable 单选及取值的实现方法
2017/01/10 Javascript
AngularJS中$http使用的简单介绍
2017/03/17 Javascript
JavaScript数据类型和变量_动力节点Java学院整理
2017/06/26 Javascript
vue中设置height:100%无效的问题及解决方法
2018/07/27 Javascript
jQuery+PHP实现上传裁剪图片
2020/06/29 jQuery
深入分析jQuery.one() 函数
2020/06/03 jQuery
解决ant design vue中树形控件defaultExpandAll设置无效的问题
2020/10/26 Javascript
使用setup.py安装python包和卸载python包的方法
2013/11/27 Python
详解Python中的各种函数的使用
2015/05/24 Python
python 分离文件名和路径以及分离文件名和后缀的方法
2018/10/21 Python
Python txt文件加入字典并查询的方法
2019/01/15 Python
Python Pexpect库的简单使用方法
2019/01/29 Python
Python迭代器模块itertools使用原理解析
2019/12/11 Python
css3中的calc函数浅析
2018/07/10 HTML / CSS
利用CSS3 动画 绘画 圆形动态时钟
2018/03/20 HTML / CSS
详解HTML5中CSS外观属性
2020/09/10 HTML / CSS
Python面试题:Python是如何进行内存管理的
2014/08/04 面试题
个人求职简历中英文自我评价
2013/12/16 职场文书
最新的互联网创业计划书
2014/01/10 职场文书
小学安全教育材料
2014/02/17 职场文书
《雷鸣电闪波尔卡》教学反思
2014/02/23 职场文书
教师个人考察材料
2014/12/16 职场文书
2015年乡镇统计工作总结
2015/04/22 职场文书
毕业实习证明范本
2015/06/16 职场文书
高中议论文(范文2篇)
2019/08/19 职场文书
MongoDB使用场景总结
2022/02/24 MongoDB