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匿名函数的一种应用 代码封装
Jun 27 Javascript
js注意img图片的onerror事件的分析
Jan 01 Javascript
js调用iframe实现打印页面内容的方法
Mar 04 Javascript
JS中FRAME的操作问题实例分析
Oct 21 Javascript
详细解读AngularJS中的表单验证编程
Jun 19 Javascript
JS+CSS实现带有碰撞缓冲效果的竖向导航条代码
Sep 15 Javascript
jQuery使用模式窗口实现在主页面和子页面中互相传值的方法
Mar 01 Javascript
深入理解AngularJs-scope的脏检查(一)
Jun 19 Javascript
js浏览器滚动条卷去的高度scrolltop(实例讲解)
Jul 07 Javascript
Mui使用jquery并且使用点击跳转新窗口的实例
Aug 19 jQuery
vue 使用eventBus实现同级组件的通讯
Mar 02 Javascript
vue脚手架搭建过程图解
Jun 06 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如何获取当前主机、域名、网址、路径、端口和参数等
2016/09/09 PHP
PHP7扩展开发之hello word实现方法详解
2018/01/15 PHP
php生成短网址/短链接原理和用法实例分析
2020/05/29 PHP
js使用eval解析json(js中使用json)
2014/01/17 Javascript
JavaScript数据类型详解
2015/04/01 Javascript
js完美解决IE6不支持position:fixed的bug
2015/04/24 Javascript
JavaScript计划任务后台运行的方法
2015/12/18 Javascript
vue+vuex+axio从后台获取数据存入vuex实现组件之间共享数据
2017/04/22 Javascript
js实现本地图片文件拖拽效果
2017/07/18 Javascript
react开发教程之React 组件之间的通信方式
2017/08/12 Javascript
js判断文件类型大小并给出提示的实现方法
2018/01/03 Javascript
浅谈Fetch 数据交互方式
2018/12/20 Javascript
layer弹出层自适应高度,垂直水平居中的实现
2019/09/16 Javascript
python实现zencart产品数据导入到magento(python导入数据)
2014/04/03 Python
python 通过xml获取测试节点和属性的实例
2018/03/31 Python
Python 写入训练日志文件并控制台输出解析
2019/08/13 Python
解决Python图形界面中设置尺寸的问题
2020/03/05 Python
Appium+Python实现简单的自动化登录测试的实现
2021/01/26 Python
HTML5 实现一个访问本地文件的实例
2012/12/13 HTML / CSS
html5 Canvas画图教程(7)—canvas里画曲线之quadraticCurveTo方法
2013/01/09 HTML / CSS
十岁生日父母答谢词
2014/01/18 职场文书
员工考核管理制度
2014/02/02 职场文书
导购员的岗位职责
2014/02/08 职场文书
办公室综合文员岗位职责范本
2014/02/13 职场文书
奉献演讲稿范文
2014/05/21 职场文书
简单租房协议书范本
2014/08/20 职场文书
党员学习群众路线教育实践活动对照检查材料
2014/09/23 职场文书
2014年社区矫正工作总结
2014/11/18 职场文书
2015年全国爱耳日活动总结
2015/02/27 职场文书
2015年小学辅导员工作总结
2015/05/27 职场文书
先进党支部事迹材料2016
2016/02/26 职场文书
小学六一儿童节活动开幕词
2016/03/04 职场文书
2016年小学六一儿童节活动总结
2016/04/06 职场文书
创业计划书之儿童理发店
2019/09/27 职场文书
OpenCV-Python实现油画效果的实例
2021/06/08 Python
MySQL中datetime时间字段的四舍五入操作
2021/10/05 MySQL