js表格隔行换色和hover效果
<!--js效果-->
<script src="js/jquery.min.js" language="javascript"></script>
<script>
$(document).ready(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>
<!--表格代码-->
<table width="100%" class="list" style="word-break: break-all" border="0"
align="center" cellpadding="0" cellspacing="1" bgcolor="#e4e5e5">
<tr class="table-tr-title">
<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%">156230152416</td>
</tr>
<tr class="table-tr-content">
<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>
</tr>
<tr class="table-tr-content">
<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>
</tr>
</table>
<!--css样式表-->
.table-tr-title{ font-weight:bold;
height: 26px;
font-size: 16px; font-family:"微软雅黑"; line-height:36px;
text-align: center;
}
.table-tr-content{line-height:32px; font-size:14px; font-family:"微软雅黑";
height: 18px; color:#676767;
background: #FFFFFF;
text-align: center;
font-size: 12px;
}
.normalEvenTD{
background: #e9e8e8;
}
.normalOddTD{
background: #FFFFFF;
}
.hoverTD{
background-color: #d2d0d0;
height: 18px;
text-align: center;
font-size: 12px;
}
.trSelected{
background-color: #51b2f6;
height: 18px;
text-align: center;
font-size: 12px;
}
js表格隔行换色和hover效果的更多相关文章
- JS应用实例4:表格隔行换色
HTML代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <t ...
- jQuery学习(四)——使用JQ完成表格隔行换色
1.步骤分析: 第一步:引入jquery的类库 第二步:直接写页面加载函数 第三步:直接使用jquery的选择器(组合选择)拿到需要操作的元素(奇数行和偶数行) 第四步:分别使用CSS的方法(css( ...
- JQuery案例一:实现表格隔行换色
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- jQuery应用实例2:表格隔行换色
这里是用JS实现的:http://www.cnblogs.com/xuyiqing/p/8376312.html 接下来利用上一篇提到的选择器利用jQuery实现: 发现原来多行代码这里只需要两行: ...
- jQuery实现表格隔行换色且感应鼠标高亮行变色
jQuery插件实现表格隔行换色且感应鼠标高亮行变色 http://www.jb51.net/article/41568.htm jquery 操作DOM的基本用法分享http://www.jb51. ...
- table 表格隔行换色实现
table 表格隔行换色实现 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...
- jQuery插件实现表格隔行换色且感应鼠标高亮行变色
实现表格隔行换色,且感应鼠标行变色的方法有很多,在本文将为大家介绍的是使用jQuery插件来实现,具体如下 看代码: : css代码:
- javascript 表格隔行换色
用到的知识点: 获取表格元素 tbody 和 rows都是有索引的 这里我们只有一组tbody所以 索引是0 偶数行 索引取余2为0 奇数行 索引取余2不为0 通过 遍历行索引设置相应的颜色. < ...
- JQuery 表格 隔行换色 和鼠标滑过的样式
$(document).ready(function () { $(".Pub_TB tbody tr:even td").css("background-color&q ...
随机推荐
- Android和IOS等效MD5加密
最近在Android和IOS上都需要对用户的某些输入进行简单的加密,于是采用MD5加密方式. 首先将目的字符串加密一次,获得32位字符串 然后将32位字符串拆为2段,分别加密1次 最后将加密后的2段拼 ...
- 【转】javascript 小数乘法结果错误处理
一.用js计算 12.32 * 7 结果是多少? 答案:86.24000000000001 为什么会出现这种问题?怎么解决? js在处理小数的乘除法的时候有一个bug,解决的方法可以是:将小数变 ...
- CorelDRAW简单绘制的一杯满满的橙汁教程
CorelDRAW怎么画一杯橙汁?方法很简单,首先绘制一个闭合路径,执行线性渐变,填充颜色:复制图形,使用刻刀工具裁剪两半,更改不透明度:然后为橙汁增加底部椭圆:修剪橙子片:绘制吸管:最后加上一层橙子 ...
- 如何巧妙使用ZBrush中的Image Plane插件
ZBrush®插件Image Plane提供了一种简单的方法加载图像到ZBrush中,以在添加纹理过程中进行使用,比如使用ZProject笔刷多边形着色,以及利用参考图建模等. ZBrush 中文版下 ...
- (1)安装vagrant和virtualbox
使用xshell,学校服务器需要先联外网. 1.安装Linux头包(linux-header package): # #yum install kernel-devel 2.安装virtualbox. ...
- IOS - plist使用
//1 可读取,不可写入工程下的plist文件: // NSString *plistPath = [[NSBundle mainBundle] pathForResource:@"O ...
- HDU 1002 A + B Problem II( 高精度加法水 )
链接:传送门 题意:A + B 高精度,板子题 /************************************************************************* & ...
- elastic学习笔记
要点 不同工具之间版本匹配很重要由点及面,先实践起来再学细节的原理和使用 技术栈 laravel5.5框架+scout组件+elasticsearch6.3.0搜索引擎 辅助 elasticsearc ...
- js实现导航固定定位
js实现导航固定定位 <!DOCTY ...
- tp框架引入第三方sdk的经验总结
tp框架开发常用到第三方的接口,这时候需要引入第三方的sdk.例如:微信扫码支付sdk,阿里大于的淘宝sdk等等 首先到官网上下载对应php的sdk文件,通常会有至少一个实例代码. 1 新建一个控制器 ...