首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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选中行颜色

jquery实现效果比较好的table选中行颜色

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
js window.print实现打印特定控件或内容
Sep 16 Javascript
解决jquery操作checkbox火狐下第二次无法勾选问题
Feb 10 Javascript
jquery插件lazyload.js延迟加载图片的使用方法
Feb 19 Javascript
无刷新预览所选择的图片示例代码
Apr 02 Javascript
angularJS与bootstrap结合实现动态加载弹出提示内容
Oct 16 Javascript
checkbox批量选中,获取选中项的值的简单实例
Jun 28 Javascript
利用BootStrap弹出二级对话框的简单实现方法
Sep 21 Javascript
从零开始搭建vue移动端项目到上线的步骤
Oct 15 Javascript
在Create React App中启用Sass和Less的方法示例
Jan 16 Javascript
巧妙运用v-model实现父子组件传值的方法示例
Apr 07 Javascript
VUEX-action可以修改state吗
Nov 19 Javascript
vue 数据操作相关总结
Dec 17 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
软件工程师面试题(40) Javascript面试题(44) 网络工程师面试题(96) Oracle面试题(81) LINUX面试题(83) .NET面试题(131) EJB面试题(46) 软件测试工程师面试题(53) C#面试题(90) PYTHON面试题(27)
You might like
编写安全 PHP应用程序的七个习惯深入分析
2013/06/08 PHP
thinkphp路由规则使用示例详解和伪静态功能实现(apache重写)
2014/02/24 PHP
PHP图片处理之使用imagecopyresampled函数裁剪图片例子
2014/11/19 PHP
Thinkphp结合ajaxFileUpload实现异步图片传输示例
2017/03/13 PHP
PHP+fiddler抓包采集微信文章阅读数点赞数的思路详解
2019/12/20 PHP
Knockoutjs快速入门(经典)
2012/12/24 Javascript
js事件冒泡实例分享(已测试)
2013/04/23 Javascript
jQuery获取选中内容及设置元素属性的方法
2014/07/09 Javascript
JQuery中两个ul标签的li互相移动实现方法
2015/05/18 Javascript
Highcharts 多个Y轴动态刷新数据的实现代码
2016/05/28 Javascript
vuejs父子组件通信的问题
2017/01/11 Javascript
微信小程序 动态绑定事件并实现事件修改样式
2017/04/13 Javascript
基于Vue的SPA动态修改页面title的方法(推荐)
2018/01/02 Javascript
关于微信小程序登录的那些事
2019/01/08 Javascript
Python threading多线程编程实例
2014/09/18 Python
Python中编写ORM框架的入门指引
2015/04/29 Python
python递归函数绘制分形树的方法
2018/06/22 Python
python查找指定文件夹下所有文件并按修改时间倒序排列的方法
2018/10/21 Python
django+mysql的使用示例
2018/11/23 Python
python处理multipart/form-data的请求方法
2018/12/26 Python
python sklearn库实现简单逻辑回归的实例代码
2019/07/01 Python
python实现可变变量名方法详解
2019/07/01 Python
pytorch实现特殊的Module--Sqeuential三种写法
2020/01/15 Python
Python3爬虫里关于识别微博宫格验证码的知识点详解
2020/07/30 Python
Python计算矩阵的和积的实例详解
2020/09/10 Python
详解CSS3 rem(设置字体大小) 教程
2017/11/21 HTML / CSS
公司JAVA开发面试题
2015/04/02 面试题
AJAX应用和传统Web应用有什么不同
2013/08/24 面试题
上级检查欢迎词
2014/01/18 职场文书
安全大检查实施方案
2014/02/22 职场文书
教师评语大全
2014/04/28 职场文书
公司经理任命书
2014/06/05 职场文书
2014年语文教研组工作总结
2014/12/06 职场文书
师德承诺书2015
2015/04/28 职场文书
祝酒词范文
2015/08/12 职场文书
导游词之四川熊猫基地
2020/01/13 职场文书