用到的知识点：

获取表格元素

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. JZOJ 1265. Round Numbers

    1265. Round Numbers(rndnum.pas/c/cpp) (File IO): input:rndnum.in output:rndnum.out Time Limits: 1000 ...

  2. wusir 面试题答案在老男孩的视频里

    注意:你问答案在哪里?答案在视频里了,就是不给你写. 第一部分 Python基础篇(80题) 为什么学习Python? 通过什么途径学习的Python? Python和Java.PHP.C.C#.C+ ...

  3. LRU算法原理解析

    LRU是Least Recently Used的缩写,即最近最少使用,常用于页面置换算法,是为虚拟页式存储管理服务的. 现代操作系统提供了一种对主存的抽象概念虚拟内存,来对主存进行更好地管理.他将主存 ...

  4. python 2.7版本解决TypeError: 'encoding' is an invalid keyword argument for this function

    今天在用yaml处理数据时,由于yaml.load可接收一个byte字符串,unicode字符串,打开的二进制文件或文本文件对象,但字节字符串和文件必须是utf-8,utf-16-be或utf-16- ...

  5. Flume-NG源码分析-整体结构及配置载入分析

    在 http://flume.apache.org 上下载flume-1.6.0版本,将源码导入到Idea开发工具后如下图所示: 一.主要模块说明 flume-ng-channels 里面包含了fil ...

  6. DiyCode开源项目 TopicActivity 分析

    1.首先看看TopActivity效果.    2.TopicActivity是一个继承BaseActivity的.前面分析过BaseActivity了.主要有一个标题栏,有返回的图标. 3.贴一下T ...

  7. Android 停止调试程序

    现在我知道怎么停掉debug的Android程序了,很简单,进入ddms界面,对着你的进程,kill.

  8. laravel5.2总结--文件上传

    1 配置 文件系统的配置文件在 config/filesystems.php 文件中,此处我们新建一个uploads本地磁盘空间用于存储上传的文件,具体配置项及说明如下: <?php retur ...

  9. windows下git安装以及基本配置

    一.首先要下载git然后进行默认安装即可,然后查看系统环境变量是否添加     二.桌面右击鼠标,选择git bash 进入操作页面 git --version 检测是否安装成功   安装完成有配置一 ...

  10. IOS开发学习笔记007-数据结构

    目录: 1.全局变量和局部变量 2.结构体 3.结构体数组 4.结构体做函数参数 5.结构体指针 6.枚举 7.总结 一.全局变量和局部变量 全局变量和局部变量的区别 1. 全局变量,再函数外定义的变 ...