如何用jquery控制表格奇偶行及活动行颜色


Posted in Javascript onApril 20, 2014

虽然jquery流行已经很多年了,一直都感觉很难,也没有花时间去学习它,只是偶尔哪天心血来潮了去看一点点,时隔多日又会忘得一干二净。最近用到表格奇偶行不同色,不得不去再看jquery,虽然感觉还是难,但已经不像以前一样无从下手了。做完后不得不来感叹一下jquery真是太牛了,不用自己再写一大堆javascript函数去实现了,简单几句轻松搞定。

先定义好表格的奇偶行样式,如下代码:

body { 
font-size:12px; 
} th { 
color: #FFFFFF; 
background: #A172AC; 
} 
table,table td,table th { 
padding: 0.5em; 
margin: 0; 
border:0; 
border-spacing:0; 
} 
/* odd items 1,3,5,7,... */ 
table tbody tr.odd, 
.odd { 
background: #FBD106; 
} 
/* even items 2,4,6,8,... */ 
table tbody tr.even, 
.even { 
background: #E6453B; 
} 
/* hovered items */ 
.odd:hover, 
.even:hover, 
.hover { 
background: #4BB747; 
color: #FFFFFF; 
}

再就是页面代码了:
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>用jquery实现table奇偶行不同色</title> 
<link href="style/mysql.css" rel="stylesheet" /> 
<script src="javascript/jquery-1.7.2.min.js"></script> 
<script language="javascript" type="text/javascript"> 
$(document).ready(function () { 
//排除th标签,th可能是有自己特有的样式,所以定义th样式。 
//$("tr:not(:has(th)):odd").addClass("odd"); 
//$("tr:not(:has(th)):even").addClass("even"); 
$("tr:odd").addClass("odd"); 
$("tr:even").addClass("even"); 
//如果CSS中不定义".odd:hover"和".even:hover"就需要toggleClass()。 
/* 
$("tr").mouseover(function () { 
$(this).toggleClass(".hover"); 
}); 
$("tr").mouseout(function () { 
$(this).toggleClass(".hover"); 
}); 
*/ 
}); 
</script> 
</head> 
<body> 
<div id="outline"> 
<table> 
<tr id="tth"> 
<th>data</th> 
<th>data</th> 
<th>data</th> 
<th>data</th> 
</tr> 
<tr> 
<td>data</td> 
<td>data</td> 
<td>data</td> 
<td>data</td> 
</tr> 
<tr> 
<td>data</td> 
<td>data</td> 
<td>data</td> 
<td>data</td> 
</tr> 
<tr> 
<td>data</td> 
<td>data</td> 
<td>data</td> 
<td>data</td> 
</tr> 
<tr> 
<td>data</td> 
<td>data</td> 
<td>data</td> 
<td>data</td> 
</tr> 
</table> 
</div> 
</body> 
</html>

如果不需要鼠标事件,只需奇偶行不同色直接可以用CSS搞定。
table tr:nth-child(even) td, 
table tr:nth-child(even) th { 
background-color: #FBD106; 
} table tr:nth-child(odd) td, 
table tr:nth-child(odd) th { 
background-color: #E6453B; 
}
Javascript 相关文章推荐
jquery json 实例代码
Dec 02 Javascript
jQuery$命名冲突怎么办如何解决
Jan 16 Javascript
jquery实现省市select下拉框的替换(示例代码)
Feb 22 Javascript
浅谈JavaScript中定义变量时有无var声明的区别
Aug 18 Javascript
jQuery实现将div中滚动条滚动到指定位置的方法
Aug 10 Javascript
浅析JavaScript函数的调用模式
Aug 10 Javascript
String字符串截取的四种方式总结
Nov 28 Javascript
提高JavaScript执行效率的23个实用技巧
Mar 01 Javascript
JS 音频可视化插件Wavesurfer.js的使用教程
Oct 31 Javascript
利用JavaScript的Map提升性能的方法详解
Aug 14 Javascript
Vue触发input选取文件点击事件操作
Aug 07 Javascript
详解JavaScript之Array.reduce源码解读
Nov 01 Javascript
jquery复选框checkbox实现删除前判断
Apr 20 #Javascript
使用jQuery异步加载 JavaScript脚本解决方案
Apr 20 #Javascript
js函数模拟显示桌面.scf程序示例
Apr 20 #Javascript
判断及设置浏览器全屏模式
Apr 20 #Javascript
js 实现浏览历史记录示例
Apr 20 #Javascript
jquery的trigger和triggerHandler的区别示例介绍
Apr 20 #Javascript
js的参数有长度限制吗?发现不能超过2083个字符
Apr 20 #Javascript
You might like
php.ini-dist 和 php.ini-recommended 的区别介绍(方便开发与安全的朋友)
2012/07/01 PHP
PHPMailer邮件发送的实现代码
2013/05/04 PHP
thinkphp分页集成实例
2017/07/24 PHP
PHP7扩展开发之hello word实现方法详解
2018/01/15 PHP
Laravel多用户认证系统示例详解
2018/03/13 PHP
去除链接虚线全面分析总结
2006/08/15 Javascript
JavaScript高级程序设计 DOM学习笔记
2011/09/10 Javascript
JavaScript实现网页图片等比例缩放实现代码及调用方式
2013/02/25 Javascript
jquery easyui combobox模糊过滤(示例代码)
2013/11/30 Javascript
用js设置下拉框为只读的小技巧
2014/04/10 Javascript
JS对象与json字符串格式转换实例
2014/10/28 Javascript
jQuery过滤HTML标签并高亮显示关键字的方法
2015/08/07 Javascript
jquery实现简单的遮罩层
2016/01/08 Javascript
javascript高级选择器querySelector和querySelectorAll全面解析
2016/04/07 Javascript
基于Turn.js 实现翻书效果实例解析
2016/06/20 Javascript
JavaScript定义数组的三种方法(new Array(),new Array('x','y')
2016/10/04 Javascript
jQuery实现的省市联动菜单功能示例【测试可用】
2017/01/13 Javascript
Nodejs使用Mongodb存储与提供后端CRD服务详解
2018/09/04 NodeJs
在小程序开发中使用npm的方法
2018/10/17 Javascript
vue elementUI 表单校验的实现代码(多层嵌套)
2019/11/06 Javascript
微信小程序实现列表左右滑动
2020/11/19 Javascript
Python中使用PyQt把网页转换成PDF操作代码实例
2015/04/23 Python
pandas多级分组实现排序的方法
2018/04/20 Python
python数字图像处理之高级形态学处理
2018/04/27 Python
Python3爬虫中关于Ajax分析方法的总结
2020/07/10 Python
python3 中时间戳、时间、日期的转换和加减操作
2020/07/14 Python
使用css3实现超炫的loading加载动画效果
2014/05/07 HTML / CSS
欧舒丹美国官网:L’Occitane美国
2018/02/23 全球购物
在校大学生个人的自我评价
2014/02/13 职场文书
怀念母亲教学反思
2014/04/28 职场文书
2014小学年度工作总结
2014/12/20 职场文书
普宁寺导游词
2015/02/04 职场文书
幼师辞职信怎么写
2015/02/27 职场文书
2015暑期爱心支教策划书
2015/07/14 职场文书
幼儿园开学报名通知
2015/07/16 职场文书
python 破解加密zip文件的密码
2021/04/22 Python