您所在的位置:小祥子 » 编程 » JavaScript » 正文

jquery实现的隔行变色代码实例

时间:2015-07-24 编辑:程序员小菜 来源:Cnblogs

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

关键词:隔行 代码