HTML代码：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

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

        <script>

            window.onload = function() {

                //1.获取表格

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

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

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

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

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

                    if(i % 2 == 0) {

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

                        tblEle.tBodies[0].rows[i].style.backgroundColor = "blue";

                    } else {

                        //5.对奇数行设置背景颜色

                        tblEle.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>

效果：

表格高亮显示：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

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

        <script>

            function changeColor(id, flag) {

                if(flag == "over") {

                    document.getElementById(id).style.backgroundColor = "red";

                } else if(flag == "out") {

                    document.getElementById(id).style.backgroundColor = "yellow";

                }

            }

        </script>

    </head>

    <body>

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

            <thead>

                <tr>

                    <th>编号</th>

                    <th>姓名</th>

                    <th>年龄</th>

                </tr>

            </thead>

            <tbody>

                <tr onmouseover="changeColor('tr1','over')" id="tr1" onmouseout="changeColor('tr1','out')">

                    <td>1</td>

                    <td>张三</td>

                    <td>22</td>

                </tr>

                <tr onmouseover="changeColor('tr2','over')" id="tr2" onmouseout="changeColor('tr2','out')">

                    <td>2</td>

                    <td>李四</td>

                    <td>25</td>

                </tr>

                <tr onmouseover="changeColor('tr3','over')" id="tr3" onmouseout="changeColor('tr3','out')">

                    <td>3</td>

                    <td>王五</td>

                    <td>27</td>

                </tr>

                <tr onmouseover="changeColor('tr4','over')" id="tr4" onmouseout="changeColor('tr4','out')">

                    <td>4</td>

                    <td>小明</td>

                    <td>29</td>

                </tr>

                <tr onmouseover="changeColor('tr5','over')" id="tr5" onmouseout="changeColor('tr5','out')">

                    <td>5</td>

                    <td>小红</td>

                    <td>30</td>

                </tr>

                <tr onmouseover="changeColor('tr6','over')" id="tr6" onmouseout="changeColor('tr6','out')">

                    <td>6</td>

                    <td>小刚</td>

                    <td>20</td>

                </tr>

            </tbody>

        </table>

    </body>

</html>

效果：

鼠标移到上面变成红色，移开变成黄色，不移动时候没有颜色

JS应用实例4：表格隔行换色的更多相关文章

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

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

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

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

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

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

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

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

  5. table 表格隔行换色实现

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

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

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

  7. javascript 表格隔行换色

    用到的知识点: 获取表格元素 tbody 和 rows都是有索引的 这里我们只有一组tbody所以 索引是0 偶数行 索引取余2为0 奇数行 索引取余2不为0 通过 遍历行索引设置相应的颜色. < ...

  8. js实现表单的隔行换色、鼠标高亮出来等相关内容以及相关事件的作用

    主要是使用的onload().onmouseover和onmouseout的相关应用,满足此次的相关操作. 具体的相关的两个代码如下: <!DOCTYPE html> <html&g ...

  9. 原生js实现音乐列表（隔行换色、全选）

    一.实现原理: 1.使用 % 运算符实现各行换色,规律:当%前面的值和后面的值相同时  结果为0: 2.使用开关思想,实现在同一个元素上反复点击时的条件判断,并且把开关以属性方式绑定在每个元素上: 3 ...

随机推荐

  1. SSM商城项目（八）

    1.   学习计划 1.solr集群搭建 2.使用solrj管理solr集群 3.把搜索功能切换到集群版 4.添加商品同步到索引库 2.   什么是SolrCloud SolrCloud(solr 云 ...

  2. servlet3.1

    Servlet3.1新增的新特性强制更改sessionId 由HttpServletRequest 的changeSessionId()方法实现 非阻塞式IO 非阻塞式IO我们应该知道Servlet底 ...

  3. python入门（五）：切片列表元祖字典

    1.切片 针对序列,使用切片可以获得我们想要的内容 序列:字符串.列表.元祖 特点:可以使用坐标获取某一个值.坐标是从0开始算 >>> s="0123456789" ...

  4. layer弹窗和日期

    这个插件用的最多的是,弹窗和日期

  5. scrapy -->CrawlSpider 介绍

    scrapy -->CrawlSpider 介绍 1.首先,通过crawl 模板新建爬虫: scrapy genspider -t crawl lagou www.lagou.com 创建出来的 ...

  6. FortiGate路由模式--静态地址线路上网配置

    1.需求:外网接口使用专线,由运营商分配指定的静态地址,内网为192.168.1.0/24网段,实现基本上网功能. 运营商分配ip地址:202.1.1.10,网关地址:202.1.1.9, DNS:2 ...

  7. [leetcode]96. Unique Binary Search Trees给定节点形成不同BST的个数

    Given n, how many structurally unique BST's (binary search trees) that store values 1 ... n? Input: ...

  8. typescript里面调用javasript

    index.html 里面加入函数: function tellYou() { egret.log("tell you."); javascript:android.funA(); ...

  9. redis在游戏服务器中的使用初探(四) redis应用

    文章系列先介绍环境搭建 介绍redis操作和代码编写运行  这是典型的实战工程过程.那么我们为何要使用redis而不是常规的数据库比如 mysql呢? 因为KV内存数据库最大的优势所有数据全部存储在内 ...

  10. eclipse里maven项目An error occurred while filtering resources解决办法

    在使用eclipse构建maven项目时,突然出现错误提示:An error occurred while filtering resources,在项目中到处都找不到哪里有问题,最后在国外网站找到解 ...