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. HLSL ddx / ddy

    [HLSL ddx / ddy] 在光栅化的时刻,GPUs会在同一时刻并行运行很多Fragment Shader,但是并不是一个pixel一个pixel去执行的,而是将其组织在2x2的一组pixels ...

  2. mysql 查询语句严格区分大小写

    一般情况下mysql 查询是不会区分大小写的,执行查询语句select id,current_unit from knowledge_attributes where  current_unit = ...

  3. 528. Random Pick with Weight index的随机发生器

    ［抄题］: Given an array w of positive integers, where w[i] describes the weight of index i, write a fun ...

  4. [leetcode]55. Jump Game青蛙跳(能否跳到终点)

    Given an array of non-negative integers, you are initially positioned at the first index of the arra ...

  5. python的配置

    1.下载python https://jingyan.baidu.com/article/0bc808fc42dfab1bd485b99f.html 2.转载:https://www.cnblogs. ...

  6. CDH 安装

    CDH 安装 市场上免费大数据框架主要有三个版本,原生的 Apache 版本,Cloudera(https://www.cloudera.com/) 公司研发的(Cloudera Distributi ...

  7. flex布局之flex-basis采坑

    场景: 容器设置为display: flex,容器里的子项目部分设置 flex: auto,子项目的宽高自适应正常,但如果再往子项目里嵌套一个(如:div),并设置高度(如:height: 100%) ...

  8. flask通过form表单一次上传多个文件

    基本上,用了flask官网的示例代码(中文版,英文版),稍微做了修改. import os from flask import Flask, flash, request, redirect, url ...

  9. 图解HTTP第一章

    了解 Web 及网络基础 Web 页面是如何呈现的吗? Web 使用一种名为 HTTP(HyperText Transfer Protocol,超文本传输协议)的协议作为规范,完成从客户端到服务器端等 ...

  10. 64位版本为什么叫amd64，而不是intel64

    64位版本为什么叫amd64,而不是intel64? 首先了解下常见的几个架构: X86是一个指令集,是刚有个人电脑时候的什么8086,286,386的那个兼容的指令集.   “x86-64”,有时会 ...