首页
所有分类
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 相关文章推荐
jQuery 隔行换色 支持键盘上下键，按Enter选定值
Aug 02 Javascript
中文路径导致unitpngfix.js不正常的解决方法
Jun 26 Javascript
JQuery判断子iframe何时加载完成解决方案
Aug 20 Javascript
js处理json以及字符串的比较等常用操作
Sep 08 Javascript
基于HTML+CSS，jQuery编写的简易计算器后续（添加了键盘监听）
Jan 05 Javascript
jQuery获取选中单选按钮radio的值
Dec 27 Javascript
详解webpack和webpack-simple中如何引入css文件
Jun 28 Javascript
vue组件发布到npm简单步骤
Nov 30 Javascript
vue实现form表单与table表格的数据关联功能示例
Jan 29 Javascript
基于mpvue的简单弹窗组件mptoast使用详解
Aug 02 Javascript
vue页面跳转实现页面缓存操作
Jul 22 Javascript
Vue 实现一个简单的鼠标拖拽滚动效果插件
Dec 10 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
道歉信(39) 欢迎词(65) 辞职信(98) 邀请函(127) 检讨书(456) 表扬信(62) 心得体会(660) 证婚词(21) 介绍信(57) 演讲稿(869)
You might like
php 注释规范
2012/03/29 PHP
基于PHP CURL用法的深入分析
2013/06/09 PHP
Codeigniter生成Excel文档的简单方法
2014/06/12 PHP
使用Appcan客户端自动更新PHP版本号（全）
2015/07/31 PHP
轻轻松松学习JavaScript
2007/02/25 Javascript
JTrackBar水平拖动效果
2007/07/15 Javascript
ext for eclipse插件安装方法
2008/04/27 Javascript
JSON语法五大要素图文介绍
2012/12/04 Javascript
IE6下opacity与JQuery的奇妙结合
2013/03/01 Javascript
nodejs调用cmd命令实现复制目录
2015/05/04 NodeJs
基于jQuery实现的仿百度首页滑动选项卡效果代码
2015/11/16 Javascript
使用jquery给指定的table动态添加一行、删除一行
2016/10/13 Javascript
js学习总结之dom2级事件基础知识详解
2017/07/27 Javascript
vue-cli项目如何使用vue-resource获取本地的json数据（模拟服务端返回数据）
2017/08/04 Javascript
angularjs 页面自适应高度的方法
2018/01/17 Javascript
Vue.js 中的实用工具方法【推荐】
2019/07/04 Javascript
关于在LayUI中使用AJAX提交巨坑记录
2019/10/25 Javascript
Vue使用预渲染代替SSR的方法
2020/07/02 Javascript
原生js+canvas实现下雪效果
2020/08/02 Javascript
8个非常实用的Vue自定义指令
2020/12/15 Vue.js
详解Typescript里的This的使用方法
2021/01/08 Javascript
python学习笔记：字典的使用示例详解
2014/06/13 Python
python实现按行切分文本文件的方法
2016/04/18 Python
Python判断变量是否为Json格式的字符串示例
2017/05/03 Python
Python简单实现自动删除目录下空文件夹的方法
2017/08/29 Python
Python图像的增强处理操作示例【基于ImageEnhance类】
2019/01/03 Python
Python3内置模块random随机方法小结
2019/07/13 Python
python3获取当前目录的实现方法
2019/07/29 Python
opencv-python的RGB与BGR互转方式
2020/06/02 Python
逼真的HTML5树叶飘落动画
2016/03/01 HTML / CSS
售后服务承诺书
2014/03/26 职场文书
团支部建设方案
2014/05/02 职场文书
小班评语大全
2014/05/04 职场文书
婚前协议书标准版
2014/10/19 职场文书
关于springboot 配置date字段返回时间戳的问题
2021/07/25 Java/Android
vue组件冲突之引用另一个组件出现组件不显示的问题
2022/04/13 Vue.js