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 对象定义方法 简单易学
Mar 22 Javascript
(jQuery,mootools,dojo)使用适合自己的编程别名命名
Sep 14 Javascript
jQuery实现根据类型自动显示和隐藏表单
Mar 18 Javascript
jQuery实现简单隔行变色的方法
Feb 20 Javascript
jquery实现文字单行横移或翻转(上下、左右跳转)
Jan 08 Javascript
React Native 搭建开发环境的方法步骤
Oct 30 Javascript
jQuery实现的简单无刷新评论功能示例
Nov 08 jQuery
小程序自定义组件实现城市选择功能
Jul 18 Javascript
Bootstrap Table 双击、单击行获取该行及全表内容
Aug 31 Javascript
JavaScript对象字面量和构造函数原理与用法详解
Apr 18 Javascript
浅谈vue中$bus的使用和涉及到的问题
Jul 28 Javascript
vue实现可移动的悬浮按钮
Mar 04 Vue.js
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/11/20 PHP
php实现的在线人员函数库
2008/04/09 PHP
数组与类使用PHP的可变变量名需要的注意的问题
2013/06/20 PHP
Zend studio文件注释模板设置方法
2013/09/29 PHP
php的socket编程详解
2016/11/20 PHP
Yii框架引用插件和ckeditor中body与P标签去除的方法
2017/01/19 PHP
jQuery使用手册之一
2007/03/24 Javascript
Extjs学习笔记之四 工具栏和菜单
2010/01/07 Javascript
url地址自动加#号问题说明
2010/08/21 Javascript
jQuery.ajax 用户登录验证代码
2010/10/29 Javascript
JavaScript学习笔记(二) js对象
2011/10/25 Javascript
js AppendChild与insertBefore用法详细对比
2013/12/16 Javascript
鼠标移入移出事件改变图片的分辨率的两种方法
2013/12/17 Javascript
js实现两点之间画线的方法
2015/05/12 Javascript
纯javascript制作日历控件
2015/07/17 Javascript
JavaScript动态改变div属性的实现方法
2015/07/22 Javascript
WordPress中利用AJAX技术进行评论提交的实现示例
2016/01/12 Javascript
jQuery EasyUI window窗口使用实例代码
2017/12/25 jQuery
详解创建自定义的Angular Schematics
2018/06/06 Javascript
微信小程序整合使用富文本编辑器的方法详解
2019/04/25 Javascript
JavaScript模块管理的简单实现方式详解
2019/06/15 Javascript
[02:38]DOTA2 夜魇暗潮2020活动介绍官方视频
2020/11/04 DOTA
用Python遍历C盘dll文件的方法
2015/05/06 Python
Python使用MYSQLDB实现从数据库中导出XML文件的方法
2015/05/11 Python
Python实现图片尺寸缩放脚本
2018/03/10 Python
CSS3制作翻转效果_动力节点Java学院整理
2017/07/11 HTML / CSS
html5 canvas 实现光线沿不规则路径运动
2020/04/20 HTML / CSS
输入一行文字,找出其中大写字母、小写字母、空格、数字、及其他字符各有多少
2016/04/15 面试题
校园创业策划书
2014/01/14 职场文书
宣传部部长竞选演讲稿
2014/04/26 职场文书
客户经理竞聘演讲稿
2014/05/15 职场文书
小学国旗下的演讲稿
2014/08/28 职场文书
买卖合同协议书范本
2014/10/18 职场文书
2015年机关党建工作总结
2015/05/22 职场文书
python处理json数据文件
2022/04/11 Python
CSS中calc(100%-100px)不加空格不生效
2023/05/07 HTML / CSS