用到的知识点：

获取表格元素

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. 日志收集系统Flume及其应用

    Apache Flume概述 Flume 是 Cloudera 提供的一个高可用的,高可靠的,分布式的海量日志采集.聚合和传输的系统.Flume 支持定制各类数据发送方,用于收集各类型数据:同时,Fl ...

  2. 学习Pytbon第七天，集合

    list_1=[5,22,2,6,5,66,6,8] list_1=set(list_1)#把列表转成集合,天生不允许 重复 print(list_1,type(list_1) list_2=set( ...

  3. ubuntu 把软件源修改为国内源和更新（转载）

    1. 备份原始文件 sudo cp /etc/apt/sources.list /etc/apt/sources.list.backup 2. 修改文件并添加国内源 vi /etc/apt/sourc ...

  4. Labyrinth POJ - 1383

    Labyrinth POJ - 1383 The northern part of the Pyramid contains a very large and complicated labyrint ...

  5. Reading comprehension HDU - 4990 （矩阵快速幂 or 快速幂+等比数列）

    ;i<=n;i++) { )ans=(ans*+)%m; %m; } 给定n,m.让你用O(log(n))以下时间算出ans. 打表,推出 ans[i] = 2^(i-1) + f[i-2] 故 ...

  6. 动态规划：HDU1864-最大报销额（处理带小数的dp问题）

    最大报销额 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Descriptio ...

  7. v-model 的修饰符

    1..trim 自动过滤输入内容最开始 和 最后的 空格,中间的会保留一个空格,多的会被过滤掉 2..lazy 一般情况下,在input的 v-model是一直在同步 输入的内容与显示的内容,不过再添 ...

  8. PageObject模式简介

    一.原理 将页面元素定位和对元素的操作行为封装成一个page类,实现对页面对象和测试用例的分离. 一条测试用例可能需要多个步骤操作元素,将每个步骤单独的封装成一个方法,在执行测试用例的时候调用封装好的 ...

  9. sqlserver导入dbf文件

    select top 10000 * from OPENROWSET('MICROSOFT.JET.OLEDB.4.0','dBase IV;HDR=NO;IMEX=2;DATABASE=E:/日常/ ...

  10. xshell 连接redis

    当我们安装好redis 在本地测试启动,存,取都正常,但是无法远程连接redis. 在redis.conf的文件默认配置中有一配置是 bind 127.0.0.1,表示绑定访问该redis的地址只能是 ...