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学习基础笔记之DOM对象操作
Nov 03 Javascript
JS验证日期的格式YYYY-mm-dd 具体实现
Jun 29 Javascript
javascript获取鼠标点击元素对象(示例代码)
Dec 20 Javascript
学习JavaScript设计模式之状态模式
Jan 08 Javascript
Web前端框架Angular4.0.0 正式版发布
Mar 28 Javascript
详解用webpack2.0构建vue2.0超详细精简版
Apr 05 Javascript
纯原生js实现贪吃蛇游戏
Apr 16 Javascript
jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
May 26 jQuery
微信小程序实现获取自己所处位置的经纬度坐标功能示例
Nov 30 Javascript
vue使用video.js进行视频播放功能
Jul 18 Javascript
Vue的双向数据绑定实现原理解析
Feb 17 Javascript
解决vue-router 嵌套路由没反应的问题
Sep 22 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 email邮箱正则
2008/10/08 PHP
PHP递归算法的详细示例分析
2013/02/19 PHP
具有时效性的php加密解密函数代码
2013/06/19 PHP
非常经典的PHP文件上传类分享
2016/05/15 PHP
Zend Framework框架实现类似Google搜索分页效果
2016/11/25 PHP
使用js实现数据格式化
2014/12/03 Javascript
jquery实现点击页面计算点击次数
2015/01/23 Javascript
Node.js和MongoDB实现简单日志分析系统
2015/04/25 Javascript
JavaScript中Number.MIN_VALUE属性的使用示例
2015/06/04 Javascript
JS实现在状态栏显示打字效果完整实例
2015/11/02 Javascript
借助FileReader实现将文件编码为Base64后通过AJAX上传
2015/12/24 Javascript
快速掌握Node.js环境的安装与运行方法
2016/02/16 Javascript
JavaScript Ajax编程 应用篇
2016/07/02 Javascript
卸载安装Node.js与npm过程详解
2016/08/15 Javascript
原生的强大DOM选择器querySelector介绍
2016/12/21 Javascript
js实现瀑布流效果(自动生成新的内容)
2017/03/16 Javascript
Windows下支持自动更新的Electron应用脚手架的方法
2018/12/24 Javascript
Vue 引入AMap高德地图的实现代码
2019/04/29 Javascript
微信小程序防止多次点击跳转和防止表单组件输入内容多次验证功能(函数防抖)
2019/09/19 Javascript
微信小程序 textarea 层级过高问题简单解决方案
2019/10/14 Javascript
Apache如何部署django项目
2017/05/21 Python
python 通过xml获取测试节点和属性的实例
2018/03/31 Python
python使用PyQt5的简单方法
2019/02/27 Python
Python微信操控itchat的方法
2019/05/31 Python
Python进程,多进程,获取进程id,给子进程传递参数操作示例
2019/10/11 Python
StubHub墨西哥:购买和出售您的门票
2016/09/17 全球购物
英国领先的运动物理治疗供应公司:Vivomed
2018/07/14 全球购物
Bose英国官方网站:美国知名音响品牌
2020/01/26 全球购物
英国银首饰公司:e&e Jewellery
2021/02/11 全球购物
行政助理岗位职责范文
2013/12/03 职场文书
大学生求职信范文应怎么写
2014/01/01 职场文书
超市重阳节活动方案
2014/02/10 职场文书
教师应聘自荐信范文
2014/03/14 职场文书
社区母亲节活动总结
2015/02/10 职场文书
交通处罚决定书
2015/06/24 职场文书
python 中[0]*2与0*2的区别说明
2021/05/10 Python