标签：
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
标签：
原文地址：http://www.cnblogs.com/xiaofinder/p/4674674.html
