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 相关文章推荐
Firefox 无法获取cssRules 的解决办法
Oct 11 Javascript
Extjs入门之动态加载树代码
Apr 09 Javascript
简短几句 通俗解释javascript的闭包
Jan 17 Javascript
node.js中的fs.futimes方法使用说明
Dec 17 Javascript
JavaScript检查数字是否为整数或浮点数的方法
Jun 09 Javascript
Css3制作变形与动画效果
Jul 24 Javascript
理解javascript异步编程
Jan 27 Javascript
JavaScript的==运算详解
Jul 20 Javascript
React 组件转 Vue 组件的命令写法
Feb 28 Javascript
小程序api实现promise封装过程解析
Nov 21 Javascript
jQuery实现移动端下拉展现新的内容回弹动画
Jun 24 jQuery
jquery实现上传图片功能
Jun 29 jQuery
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基础教程 php内置函数实例教程
2012/08/21 PHP
php阳历转农历优化版
2016/08/08 PHP
简洁短小的 JavaScript IE 浏览器判定代码
2010/03/21 Javascript
jquery 面包屑导航 具体实现
2013/06/05 Javascript
如何设置iframe高度自适应在跨域情况下的可用方法
2013/09/06 Javascript
Nodejs+express+html5 实现拖拽上传
2014/08/08 NodeJs
jquery实现导航固定顶部的效果仿蘑菇街
2014/10/22 Javascript
javascript学习笔记之函数定义
2015/06/25 Javascript
angularjs学习笔记之简单介绍
2015/09/26 Javascript
jquery Deferred 快速解决异步回调的问题
2016/04/05 Javascript
利用JS提交表单的几种方法和验证(必看篇)
2016/09/17 Javascript
javascript实现的上下无缝滚动效果
2016/09/19 Javascript
javascript简单进制转换实现方法
2016/11/24 Javascript
详解angular2采用自定义指令(Directive)方式加载jquery插件
2017/02/09 Javascript
react+redux的升级版todoList的实现
2017/12/18 Javascript
JS加密插件CryptoJS实现的DES加密示例
2018/08/16 Javascript
解决微信小程序中转换时间格式IOS不兼容的问题
2019/02/15 Javascript
微信小程序组件传值图示过程详解
2019/07/31 Javascript
JavaScript cookie原理及使用实例
2020/05/08 Javascript
JS倒计时两种实现方式代码实例
2020/07/27 Javascript
javascript实现贪吃蛇游戏(娱乐版)
2020/08/17 Javascript
[01:00]选手抵达华西村 整装待发备战2016国际邀请赛中国区预选赛
2016/06/25 DOTA
python随机生成指定长度密码的方法
2015/04/04 Python
centos7中安装python3.6.4的教程
2019/12/11 Python
Pandas —— resample()重采样和asfreq()频度转换方式
2020/02/26 Python
Python更换pip源方法过程解析
2020/05/19 Python
python删除某个目录文件夹的方法
2020/05/26 Python
Python调用.net动态库实现过程解析
2020/06/05 Python
HTML5 新事件 小结
2009/07/16 HTML / CSS
韩国商务邀请函
2014/01/14 职场文书
竞选班长演讲稿400字
2014/08/22 职场文书
警察群众路线整改措施
2014/09/26 职场文书
2015年保险公司个人工作总结
2015/05/22 职场文书
Java使用jmeter进行压力测试
2021/07/09 Java/Android
Windows 11上手初体验:任务栏和开始菜单等迎来大改
2021/11/21 数码科技
python数字图像处理之图像自动阈值分割示例
2022/06/28 Python