如何用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 相关文章推荐
js 动态文字滚动的例子
Jan 17 Javascript
最短的IE判断var ie=!-[1,]分析
May 28 Javascript
JavaScript实现的内存数据库LokiJS介绍和入门实例
Nov 17 Javascript
JavaScript实现数组在指定位置插入若干元素的方法
Apr 06 Javascript
JavaScript实现点击按钮直接打印
Jan 06 Javascript
JS使用cookie设置样式的方法
Jun 30 Javascript
纯JS实现只能输入数字的简单代码
Jun 21 Javascript
JS原生轮播图的简单实现(推荐)
Jul 22 Javascript
jQuery 实现左右两侧菜单添加、移除功能
Jan 02 jQuery
vue swipe自定义组件实现轮播效果
Jul 03 Javascript
微信小程序canvas截取任意形状的实现代码
Jan 13 Javascript
微信小程序语音同步智能识别的实现案例代码解析
May 29 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
反射调用private方法实践(php、java)
2015/12/21 PHP
Laravel 5.5基于内置的Auth模块实现前后台登陆详解
2017/12/21 PHP
PHP fopen中文文件名乱码问题解决方案
2020/10/28 PHP
改进版通过Json对象实现深复制的方法
2012/10/24 Javascript
jQuery中阻止冒泡事件的方法介绍
2014/04/12 Javascript
浅谈Javascript Base64 加密解密
2014/12/28 Javascript
jQuery实现鼠标经过购物车出现下拉框代码(推荐)
2016/07/21 Javascript
js 能实现监听F5页面刷新子iframe 而父页面不刷新的方法
2016/11/09 Javascript
webpack学习--webpack经典7分钟入门教程
2017/06/28 Javascript
jQuery实现节点的追加、替换、删除、复制功能示例
2017/07/11 jQuery
webpack构建vue项目的详细教程(配置篇)
2017/07/17 Javascript
Node.js搭建小程序后台服务
2018/01/03 Javascript
浏览器调试动态js脚本的方法(图解)
2018/01/19 Javascript
基于vue开发的在线付费课程应用过程
2018/01/25 Javascript
Nuxt.js实现校验访问浏览器类型的中间件
2018/08/24 Javascript
详解在vue-cli中使用graphql即vue-apollo的用法
2018/09/08 Javascript
webpack3升级到webpack4遇到问题总结
2019/09/30 Javascript
基于vue实现微博三方登录流程解析
2020/11/04 Javascript
详解vue 组件的实现原理
2020/11/12 Javascript
Python中apply函数的用法实例教程
2014/07/31 Python
深入解析Python中函数的参数与作用域
2016/03/20 Python
Python算法应用实战之栈详解
2017/02/04 Python
Python利用BeautifulSoup解析Html的方法示例
2017/07/30 Python
Python-ElasticSearch搜索查询的讲解
2019/02/25 Python
python实现邮件循环自动发件功能
2020/09/11 Python
python实现代码审查自动回复消息
2021/02/01 Python
CSS3实现自定义Checkbox特效实例代码
2017/04/24 HTML / CSS
英国航空官网:British Airways
2016/09/11 全球购物
英国翻新电子产品购物网站:Tech Trade
2017/12/25 全球购物
英国奢侈品概念店:Base Blu
2019/05/16 全球购物
外语系毕业生找工作的求职信
2013/11/28 职场文书
普通简短的个人自我评价
2014/02/15 职场文书
小学生国庆节演讲稿
2014/09/05 职场文书
普宁寺导游词
2015/02/04 职场文书
java executor包参数处理功能 
2022/02/15 Java/Android
微信小程序纯CSS实现无限弹幕滚动效果
2022/09/23 HTML / CSS