用jQuery实现表格颜色的交替显示

引用网址http://bbs.blueidea.com/thread-2853109-1-4.html

为了能够更清晰的显示表格中的数据，使用双色表格来显示数据的例子已经屡见不鲜了。我们通常都是使用JavaScript来实现这种效果，可是你知道jQuery中该如何做吗？用jQuery的语句重复JavaScript实现方法吗？不，其实jQuery已经为我们准备好了一切。

首先建立表格的结构，别忘了给表格定义一个class，我这里定义的class名为truecolor。

<table width="450" class="truecolor">
<thead>
<tr>
<th>博客</th>
<th>作者</th>
<th>网址</th>
</tr>
</thead>
<tbody>
<tr>
<td>风格之舞</td>
<td>火德</td>
<td>www.style5.cn</td>
</tr>
<tr>
<td>赵雷的博客</td>
<td>赵雷</td>
<td>zhaolei.asia</td>
</tr>
<tr>
<td>寂寞广场</td>
<td>魏春亮</td>
<td>weiliang86.blogcn.com</td>
</tr>
<tr>
<td>淘宝UED</td>
<td>淘宝</td>
<td>ued.taobao.com</td>
</tr>
</tbody>
</table>

下面是CSS部分，为表格的不同状态定义样式。

<mce:style type="text/css"><!--
.truecolor {border:1px solid #333;text-align:center;} /* 非关键部分：给表格加个边框 */
.truecolor th {background-color:#333; color:#FFF;} /* 非关键部分：给表头定义样式 */
.color1 {background-color:#DDD; color:#333;} /* 关键部分：定义tr的第一种样式 */
.color2 {background-color:#EEE; color:#333;} /* 关键部分：定义tr的第二种样式 */
.color3 {background-color:#666; color:#FFF;} /* 关键部分：定义tr在鼠标悬浮状态的样式 */
--></mce:style><style type="text/css" mce_bogus="1">.truecolor {border:1px solid #333;text-align:center;} /* 非关键部分：给表格加个边框 */
.truecolor th {background-color:#333; color:#FFF;} /* 非关键部分：给表头定义样式 */
.color1 {background-color:#DDD; color:#333;} /* 关键部分：定义tr的第一种样式 */
.color2 {background-color:#EEE; color:#333;} /* 关键部分：定义tr的第二种样式 */
.color3 {background-color:#666; color:#FFF;} /* 关键部分：定义tr在鼠标悬浮状态的样式 */</style>

现在样式定义好了，那么怎么把样式应用到表格上呢？下面进入最关键的jQuery部分。

/*
* 请确保你已经在之前引入了jQuery的js文件
* 我这里是使用Wordpress自带的jQuery
* 为避免框架的冲突，我在这里使用jQuery()而不是$()
*/
jQuery(document).ready(function(){
jQuery(".truecolor tr:odd").addClass("color1");
// 选择class为.truecolor的对象中的单数行，为该行添加.color1样式
jQuery(".truecolor tr:even").addClass("color2");
// 选择class为.truecolor的对象中的双数行，为该行添加.color2样式
jQuery(".truecolor tr").hover(function(){
jQuery(this).addClass("color3")
},function(){
jQuery(this).removeClass("color3")
});
// 格式为：jQuery选取对象.hover(鼠标移到对象触发的函数,鼠标移出对象触发的函数);
// 鼠标over时，添加.color3样式；鼠标out时，移除.color3样式
});