用到的知识点：

获取表格元素

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. 12.1.VUE学习之-循环li,if判断示例讲解class中应用表达式

    功能: 当点击按键时,改变当前循环数组里的status里的值, 判断staus里的当前的值来,切换显示 删除 和 恢复 的按钮 判断staus里的当前的值来改变span标签里的字体颜色样式 <! ...

  2. 数据分析处理库Pandas——概述

    导入Pandas库 创建DataFrame结构 读取.csv文件 titanic_train.csv文件:https://files.cnblogs.com/files/gloria-zhang/ti ...

  3. Python 列表元素分组,比如 [1,2,3,...20]变成 [[1,2,3],[4,5,6]....]（列表生成式解决）

    # 生成一个1到20的列表 a=[x for x in range(1,21)] # 把a列表切片,并赋值给b列表,x为0到20且步长为3的列表,在这里具体为[0,3,6,9,12,15,18] # ...

  4. The 2016 ACM-ICPC Asia Shenyang Regional Contest

    A. Thickest Burger 大数 × 2 + 小数 #include <cstdio> #include <algorithm> using namespace st ...

  5. Ping过程&ICMP

    1.ICMP(Internet控制消息协议) ICMP=Internet Control Message Protocol 它是TCP/IP协议族的一个子协议 作用:用于在IP主机.路由之间传递控制消 ...

  6. 59、小米电视安装apk（无u盘操作）

    第一步 打开电视或者盒子,找到应用商店 第二步 打开应用商店 第三步.打开应用商店后,找到用户,别切换到快捷安装 第四步.记住地址,使用在同一网络下的电脑打开此网页 第五步.页面效果如图 第六步.找到 ...

  7. 【Gas Station】cpp

    题目: There are N gas stations along a circular route, where the amount of gas at station i is gas[i]. ...

  8. leetcode 【 Subsets 】python 实现

    题目: Given a set of distinct integers, S, return all possible subsets. Note: Elements in a subset mus ...

  9. Java 语言概述与开发环境（1）

    目录: 一.计算机语言的发展史 二.Java语言的简述 三.Java的特点 四.java语言的运行环境及环境变量的配置 五.Dos的常见命令 六.第一个java程序-HelloWord        ...

  10. redis linux 安装

    安装 1): wget http://download.redis.io/releases/redis-5.0.2.tar.gz 2): tar xzf redis-5.0.2.tar.gz 3):c ...