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中关于indexOf的使用方法与问题小结
Aug 05 Javascript
分享一个自定义的console类 让你不再纠结JS中的调试代码的兼容
Apr 20 Javascript
Js操作树节点自动折叠展开的几种方法
May 05 Javascript
js获取指定日期周数以及星期几的小例子
Jun 27 Javascript
node.js集成百度UE编辑器
Feb 05 Javascript
js实现文件上传表单域美化特效
Nov 02 Javascript
js+css绘制颜色动态变化的圈中圈效果
Jan 27 Javascript
Javascript中prototype的使用详解
Jun 18 Javascript
基于canvas的二维码邀请函生成插件
Feb 14 Javascript
Vue中计算属性computed的示例解读
Jul 26 Javascript
jQuery取得元素标签名称小结(附代码)
Aug 16 jQuery
vue实现搜索过滤效果
May 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安装攻略:常见问题解答(二)
2006/10/09 PHP
也谈php网站在线人数统计
2008/04/09 PHP
php数组的一些常见操作汇总
2011/07/17 PHP
php5.3中连接sqlserver2000的两种方法(com与ODBC)
2012/12/29 PHP
preg_match_all使用心得分享
2014/01/31 PHP
PHP中判断文件存在使用is_file还是file_exists?
2015/04/03 PHP
使用Yii2实现主从数据库设置
2016/11/20 PHP
innertext , insertadjacentelement , insertadjacenthtml , insertadjacenttext 等区别
2007/06/29 Javascript
javascript通过class来获取元素实现代码
2013/02/20 Javascript
js怎么终止程序return不行换jfslk
2013/05/30 Javascript
如何让页面加载完成后执行js
2013/06/26 Javascript
js实现浏览器窗口大小被改变时触发事件的方法
2015/02/02 Javascript
基于JS实现简单的样式切换效果代码
2015/09/04 Javascript
javascript中日期函数new Date()的浏览器兼容性问题
2015/09/05 Javascript
jquery利用json实现页面之间传值的实例解析
2016/12/12 Javascript
JavaScript省市级联下拉菜单实例
2017/02/14 Javascript
浅谈webpack打包之后的文件过大的解决方法
2018/03/07 Javascript
Python找出list中最常出现元素的方法
2016/06/14 Python
Python自动化运维_文件内容差异对比分析
2017/12/13 Python
Python3中在Anaconda环境下安装basemap包
2018/10/21 Python
python 动态生成变量名以及动态获取变量的变量名方法
2019/01/20 Python
Python3.5文件读与写操作经典实例详解
2019/05/01 Python
10行Python代码实现Web自动化管控的示例代码
2020/08/14 Python
CSS3中background-clip和background-origin的区别示例介绍
2014/03/10 HTML / CSS
css3实现可滑动跳转的分页插件示例
2014/05/08 HTML / CSS
美国从事品牌鞋类零售的连锁店:Famous Footwear
2016/08/25 全球购物
澳大利亚设计的优质鞋类和适合澳大利亚生活方式的服装:Rivers
2019/04/23 全球购物
小学新学期寄语
2014/04/02 职场文书
入党政审材料范文
2014/12/24 职场文书
会议邀请函
2015/01/30 职场文书
安全事故隐患排查治理制度
2015/08/05 职场文书
2016年党员公开承诺书格式范文
2016/03/24 职场文书
MySQL时间盲注的五种延时方法实现
2021/05/18 MySQL
7个关于Python的经典基础案例
2021/11/07 Python
Python echarts实现数据可视化实例详解
2022/03/03 Python
Java 轮询锁使用时遇到问题
2022/05/11 Java/Android