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

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

隔行变色效果在大量的网站应用,尤其是表格或者新闻列表之类的结构,可以有效增强网站的辨识度,更为人性化,下面通过一个简单的实例介绍一下它的实现原理,至于它的美观度这里就不讲究了,代码实例如下:

){
      $(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

更多相关文章
  • 实现table表格各行变色代码实例:本章节介绍一下如何实现表格内容的隔行变色效果,这一效果的应用非常广泛,因为它有着较高的实用性,并且实现代码也比较简单,下面就通过代码实例介绍一下如何实现此效果.代码如下: <!DOCTYPE html> <html> <head> ...
  • 支持键盘上下键的隔行变色代码:隔行变色代码非常的常用,尤其是在新闻列表形式的场景,不过大多数都只是支持鼠标效果,而对键盘的上下键并不支持.下面就提供一段支持上下键的隔行变色效果代码.代码如下: ); }) </script> </head> <body> < ...
  • 用jQuery实现的隔行变色的效果我是今天我是今天我是今天我是今天
  • jQuery删除表格指定行代码实例:本章节介绍一下如何删除表格中指定的行,代码非常的简单,直接上代码: $("table tr").eq(2).remove(); 相关阅读:1.eq()函数可以参阅jQuery的eq()方法一章节.2remove()函数可以参阅jQuery的re ...
  • jQuery清除表单数据代码实例:清除表单中的数据最简单的方法,就是点击重置按钮实现清空效果,但是在实际应用中可能需要根据代码的具体运行情况来清除表单中的数据,下面就分享一段能够实现此功能的jQuery代码. function clearForm(form) { $(':input', form). ...
  • jquery实现的瀑布流代码实例:瀑布流现在很多网站都有应用,本站的特效下载专区也有应用,图片的加载会根据下拉条滚动实现的,实现了需要多少加载多少的功能,可以有效的提高网站的执行效率,下面是一段网络上的代码实例,供大家参考.代码实例如下: function lazyload(option){ var ...
  • ; } $("#para").css("font-size", textFontSize+unit); }); }); </script> </head> <body> <div class="msg&quo ...
  • 该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现表格隔行变色,且鼠标移动在表格的某一行上时,该行能高亮显示.整体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTM ...
一周排行
  •     前次系统升级,出现一些意想不到的问题,烦恼了我很久,系统升级之后重启,然后提示各种找到以.so结尾的文件,后来查询得知,是因为linux系统升级后,函数库没有更新,造成很多服务启动出错.为了以后不再出现这样的 ...
  • 一.分析说明    为了写出更加完善的tomcat启动方面的脚本,用于代码上线自动化,特分析下tomcat的bin目录下的shutdown.sh脚本,学习标准的sh脚本的编写方法,从中吸取经验二.脚本分析#!/bin ...
  • 1.1搭建基于Eclipse的Android应用开发环境
    Andriod操作系统是google开发的面向手持设备的一站式解决方案,它不仅提供了底层的 ...
  • Windows7 RC问题不断   文/刚子    五月三日,刚子收到微软的一封名为<Announcing Windows 7 Release Candidate>的电子邮件,早在互联网上早已得知wind ...
  • 输出//####################//w##################!//we################h!//.....................//welcome to bit- ...
  •     之前做的产品已经有10年的历史,有相对清晰的流程,人员配备上从工作10年到工作1,2年的都有,搭配也比较合理.再看我现在的这个产品,就一个字"乱".而且是方方面面,scope不够清晰(或者 ...
  •      程序语句和表达式通常应该只使用一种类型的变量和常量,但是如果混合使用类型,      C使用一个规则集合来完成数据类型的自动转换. 以下是一些C数据类型转换的基本规则: 1.当出现在表达式中时,有符号和无符 ...
  • 原文:       原来总是很自信地以为:有本事找到 MD5 的碰撞又如何?你难道还有本事让两个可执行文件的 MD5 一样,却又都能正常运行,并且可以做完全不同的事情么?    答:还真的可以.    [url]ht ...
  • 一.网络拓扑 二.配置网络子网1: 192.168.1.0/24,网关GW1子网2: 192.168.0.0/24,网关GW2GW1和GW2已添加到子网2.1的路由.A和B现在可正常ping 通三.IPsec配置1. ...
  • Oracle10gR2之DataGuard物理standby配置
     备库成功应用了主库的归档日志