你的位置:首页 > Java教程

[Java教程]jquery实现的隔行变色代码实例

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