jquery实现的隔行变色代码实例:
隔行变色效果在大量的网站应用，尤其是表格或者新闻列表之类的结构，可以有效增强网站的辨识度,更为人性化，下面通过一个简单的实例介绍一下它的实现原理，至于它的美观度这里就不讲究了，代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.51texiao.cn/" />
<title>蚂蚁部落</title>
<style type="text/css">
table{
width:300px;
}
caption{
background:#DCA;
}
th{
background:#FCA;
width:50%;
}
td{
text-align:center;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
odd= {"background":"#EDA","color":"#3F5"};
even={"background":"#2DA","color":"#875"};
odd_even("#table_test",odd,even);
});
function odd_even(id,odd,even){
$(id).find("tr").each(function(index,element){
if(index%2==1){
$(this).css(odd);
}
else{
$(this).css(even);
}
})
}
</script>
</head>
<body>
<table id="table_test">
<caption>表格标题</caption>
<tr>
<th>网站名称</th>
<th>网站所在地</th>
</tr>
<tr>
<td>蚂蚁部落</td>
<td>青岛市南</td>
</tr>
<tr>
<td>蚂蚁部落</td>
<td>青岛市南</td>
</tr>
<tr>
<td>蚂蚁部落</td>
<td>青岛市南</td>
</tr>
<tr>
<td>蚂蚁部落</td>
<td>青岛市南</td>
</tr>
<tr>
<td>蚂蚁部落</td>
<td>青岛市南</td>
</tr>
<tr>
<td>蚂蚁部落</td>
<td>青岛市南</td>
</tr>
<tr>
<td>蚂蚁部落</td>
<td>青岛市南</td>
</tr>
<tr>
<td>蚂蚁部落</td>
<td>青岛市南</td>
</tr>
</table>
</body>
</html>
以上代码实现了我们想要的隔行变色效果，下面简单介绍一下它的实现过程。
一.实现原理:
原理非常的简单，通过each()便利每一行，然后通过索引值求余来判断奇偶行，然后给它们每一行设置不同的背景颜色。
二.代码注释:
1.$(document).ready(function(){},当文档结构完全加载完毕再去执行函数中的代码。
2.odd={"background":"#EDA","color":"#3F5"}和even={"background":"#2DA","color":"#875"}，建立两个json格式的对象，用于设置奇偶行的背景颜色。
3.odd_even("#table_test",odd,even)，调用函数并且传递参数。
4.function odd_even(id,odd,even){}，创建一个函数，此函数会传递3个参数，第一个是要设置隔行变色表格的id，第二个和第三个分别是奇偶行的背景颜色。
5.$(id).find("tr").each(function(index,element){ }，获取tr并且通过each函数遍历。
6.if(index%2==1) ，如果索引和2求余，如果余数是1，那么就将设置指定的背景颜色，否则设置另一个背景颜色。需要注意的是，索引值是从零开始的，所以，索引为奇数的时候是偶数行。
原文地址是:http://www.51texiao.cn/jqueryjiaocheng/2015/0613/4044.html
最原始地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=8324