用到的知识点：

获取表格元素

tbody 和 rows都是有索引的

这里我们只有一组tbody所以 索引是0

偶数行 索引取余2为0

奇数行 索引取余2不为0

通过 遍历行索引设置相应的颜色。

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>表格隔行换色</title>

        <script type="text/javascript">

            window.onload=function(){

                //1.获取表格

                var tbEle=document.getElementById("tbl");

                //2.获取表格中tbody里面的行数(长度)

                var len=tbEle.tBodies[0].rows.length;

                //3.对tbody里面的行进行遍历

                for(var i=0;i<len;i++){

                    if(i%2==0){

                        //4.对偶数行设置背景颜色

                        tbEle.tBodies[0].rows[i].style.backgroundColor="pink";

                    }else{

                        tbEle.tBodies[0].rows[i].style.backgroundColor="gold";

                    }

                }

            }

        </script>

    </head>

    <body >

        <table border="1" width="500" height="50" align="center" id="tbl">

            <thead>

            <tr>

                <th>编号</th>

                <th>姓名</th>

                <th>年龄</th>

            </tr>

            </thead>

            <tbody>

            <tr>

                <td>1</td>

                <td>张三</td>

                <td>22</td>

            </tr>

            <tr>

                <td>2</td>

                <td>李四</td>

                <td>25</td>

            </tr>

            <tr>

                <td>3</td>

                <td>王五</td>

                <td>27</td>

            </tr>

            <tr>

                <td>4</td>

                <td>赵六</td>

                <td>29</td>

            </tr>

            <tr>

                <td>5</td>

                <td>田七</td>

                <td>30</td>

            </tr>

            <tr>

                <td>6</td>

                <td>汾九</td>

                <td>20</td>

            </tr>

            </tbody>

        </table>

    </body>

</html>

javascript 表格隔行换色的更多相关文章

  1. table 表格隔行换色实现

    table 表格隔行换色实现 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...

  2. jQuery应用实例2：表格隔行换色

    这里是用JS实现的:http://www.cnblogs.com/xuyiqing/p/8376312.html 接下来利用上一篇提到的选择器利用jQuery实现: 发现原来多行代码这里只需要两行: ...

  3. jQuery学习(四)——使用JQ完成表格隔行换色

    1.步骤分析: 第一步:引入jquery的类库 第二步:直接写页面加载函数 第三步:直接使用jquery的选择器(组合选择)拿到需要操作的元素(奇数行和偶数行) 第四步:分别使用CSS的方法(css( ...

  4. jQuery实现表格隔行换色且感应鼠标高亮行变色

    jQuery插件实现表格隔行换色且感应鼠标高亮行变色 http://www.jb51.net/article/41568.htm jquery 操作DOM的基本用法分享http://www.jb51. ...

  5. JQuery案例一：实现表格隔行换色

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. JS应用实例4：表格隔行换色

    HTML代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <t ...

  7. jQuery插件实现表格隔行换色且感应鼠标高亮行变色

    实现表格隔行换色,且感应鼠标行变色的方法有很多,在本文将为大家介绍的是使用jQuery插件来实现,具体如下 看代码: : css代码:  

  8. JQuery 表格 隔行换色 和鼠标滑过的样式

    $(document).ready(function () { $(".Pub_TB tbody tr:even td").css("background-color&q ...

  9. js表格隔行换色和hover效果

    <!--js效果--> <script src="js/jquery.min.js" language="javascript">< ...

随机推荐

  1. 爬山算法 | Java版HA_TSP

    嗯哼,今天记录下采用Java编写的爬山算法(Hill Algorithm)求解TSP问题. 爬山算法与其他智能算法类似,是一种用来求解多峰函数最值的算法,爬山算法的基本思想是新解不劣于当前解则转移,否 ...

  2. Failed to find provider info for com.tencent.mm.sdk.plugin.provider

    微信启动的时候可以调用,微信没启动,调用支付报这个错误. 我的问题是 微信发开着的jar包不是最新的,去官方网站下一个最新的就可以成功了.

  3. 关于mongodb的安装运行

    最近在学习node.js,在实例的项目中要用到mongodb做数据库.于是便记录一下mongodb的安装流程和遇到的坑: 1.下载地址:http://www.mongodb.org/downloads ...

  4. zookeeper Zookeeper

    这是ZooKeeper客户端库的主要类.使用一个ZooKeeper服务,应用程序必须首先实例化ZooKeeper类的对象.所有的迭代都将通过调用ZooKeeper类的方法来完成.除非另有说明,该类的方 ...

  5. python 使用入的坑

    如测试代码,并没有将li.li_ 的交集查询出来 li=[1,2,3,4,5] li_=[2,5,6,7,9] for i in li_: if i in li: li_.remove(i) prin ...

  6. 关于在smarty中实现省市区三级联动

    刚开始接触php,,其实对于一些比较深入的东西还不是很了解,就像是这次的省市区联动,都是用三张表为基础编码的,原谅我的无知,谢谢. 接下来就是编码部分了: <?php require('./sm ...

  7. 发行说明 - Kafka - 版本1.0.0

    发行说明 - Kafka - 版本1.0.0 以下是Kafka 1.0.0发行版中解决的JIRA问题的摘要.有关该版本的完整文档,入门指南以及有关该项目的信息,请参阅Kafka项目网站. 有关升级的注 ...

  8. iOS自定义控件创建原理（持续更新）

    前言 因为如果要创建各种自定义控件根据需求的不同会有很多的差别,所以我就在这里,分析一些自定义控件的创建实现方法 弹出视图 1.把要弹出的视图装在一个控制器里面,自定义转场动画 2.创建一个弹出视图, ...

  9. vNS12 MySQL Performance

    vNS12 MySQL Performance vNS12(192.168.195.91): 2vCPU + 2GBMemMySQL1(192.168.185.73): 2vCPU + 1GBMemM ...

  10. HDU 1043 & POJ 1077 Eight（康托展开+BFS | IDA*）

    Eight Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 30176   Accepted: 13119   Special ...