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中通过闭包解决只能取得包含函数中任何变量最后一个值的问题
Aug 12 Javascript
瀑布流布局并自动加载实现代码
Mar 12 Javascript
全系IE支持Bootstrap的解决方法
Oct 19 Javascript
js实现跨域的多种方法
Dec 25 Javascript
JavaScript实现99乘法表及隔行变色实例代码
Feb 24 Javascript
jQuery验证插件validate使用详解
May 11 Javascript
基于jquery插件实现拖拽删除图片功能
Aug 27 Javascript
jQuery hover事件简单实现同时绑定2个方法
Jun 07 Javascript
基于jQuery实现中英文切换导航条效果
Sep 18 Javascript
js带闹铃功能的倒计时代码
Sep 29 Javascript
python爬取安居客二手房网站数据(实例讲解)
Oct 19 Javascript
Laravel 如何在blade文件中使用Vue组件的示例代码
Jun 28 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+MYSQL的文章管理系统(一)
2006/10/09 PHP
PHP开发入门教程之面向对象
2006/12/05 PHP
解析PHP中empty is_null和isset的测试
2013/06/29 PHP
开启PHP的伪静态模式
2015/12/31 PHP
JavaScript 组件之旅(三):用 Ant 构建组件
2009/10/28 Javascript
js简单抽奖代码
2015/01/16 Javascript
json格式数据的添加,删除及排序方法
2016/01/21 Javascript
整理关于Bootstrap模态弹出框的慕课笔记
2017/03/29 Javascript
微信小程序网络请求wx.request详解及实例
2017/05/18 Javascript
webpack vue项目开发环境局域网访问方法
2018/03/20 Javascript
小程序登录态管理的方法示例
2018/11/13 Javascript
解决echarts的多个折现数据出现坐标和值对不上的问题
2018/12/28 Javascript
JavaScript 处理树数据结构的方法示例
2019/06/16 Javascript
Weex开发之WEEX-EROS开发踩坑(小结)
2019/10/16 Javascript
python多线程threading.Lock锁用法实例
2014/11/01 Python
python发送HTTP请求的方法小结
2015/07/08 Python
在Django中管理Users和Permissions以及Groups的方法
2015/07/23 Python
python with提前退出遇到的坑与解决方案
2018/01/05 Python
Python爬虫实现百度图片自动下载
2018/02/04 Python
Python中@property的理解和使用示例
2019/06/11 Python
Django 实现图片上传和显示过程详解
2019/07/18 Python
线程安全及Python中的GIL原理分析
2019/10/29 Python
python使用OpenCV模块实现图像的融合示例代码
2020/04/10 Python
野兽派官方旗舰店:THE BEAST 野兽派
2016/08/05 全球购物
Sephora丝芙兰泰国官方网站:国际知名化妆品购物
2017/11/15 全球购物
铭宣海淘转运:美国、日本、英国转运等全球转运公司
2019/09/10 全球购物
杭州SQL浙江浙大网新恩普软件有限公司
2013/07/27 面试题
岗位竞聘演讲稿范文
2014/04/24 职场文书
保护环境建议书400字
2014/05/13 职场文书
中小学生学籍证明
2014/10/25 职场文书
临时工聘用合同协议书
2014/10/29 职场文书
2015财务年度工作总结范文
2015/05/04 职场文书
新人入职感言
2015/07/31 职场文书
继续教育心得体会(共6篇)
2016/01/19 职场文书
2016党员干部廉政准则学习心得体会
2016/01/20 职场文书
vue实现列表拖拽排序的示例代码
2022/04/08 Vue.js