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;
}
页面代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>用jquery实现table奇偶行不同色--www.jbxue.com</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;
}
您可能感兴趣的文章：
jquery控制表格奇偶行与活动行颜色
表格奇偶行设置不同颜色的核心JS代码
js 隔行变色的最简单代码
跟我一起学写jQuery插件开发方法（附完整实例及下载）
jquery实现奇偶行赋值不同css值
Jquery 插件学习实例1 插件制作说明与tableUI优化
CSS样式表一席谈之CSS快速入门
js 隔行变色与鼠标悬停自动变色的实现代码
Jquery 实现表格颜色交替变化鼠标移过颜色变化实例
jQuery表格颜色插件 HeatColor