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. unable to auto-detect email address

    git错误:unable to auto-detect email address 2017年11月14日 08:51:08 陈君豪 阅读数:7914   idea 用git更新的时候报错,详细错误信 ...

  2. Ado.net之对数据库的增删改查

    一.了解Command对象 1.Command对象:封装了所有对外部数据源的操作,包括增删改查和执行存储过程,并在执行完成后返回合适的结果,同Connection一样,对于不同的数据源,Ado.net ...

  3. 37.Spring-事务控制.md

    目录 1.分类 2.Spring对jadc事务管理 2.1xml方式 2.1.1首先定义Dao对象和Server对象 2.1.2配置文件实现事务管理 2.2注解方式 2.2.1对象类 2.2.2配置文 ...

  4. Python学习—爬虫篇之破解ntml登陆问题

    之前帮公司爬取过内部的一个问题单网站,要求将每个问题单的下的附件下载下来.一开始的时候我就遇到一个破解登陆验证的大坑......      (╬￣皿￣)=○ 由于在公司使用的都是内网,代码和网站的描述 ...

  5. 小强学渲染之OpenGL状态机理解

    状态机是理论上的一种机器,呃这个说法非常非常的抽象.通俗一点理解,状态机描述了一个对象在其生命周期内所经历的各种状态,状态间的转变,发生转变的动因,条件及转变中所执行的活动.或者说,状态机是一种行为, ...

  6. python动态模块导入

    首先创建一个模块目录lib,然后在目录内创建一个模块为:aa.py 官方推荐: import importlib aa = importlib.import_module('lib.aa') c = ...

  7. 【实习】从ubuntu迁移过来的代码，在centos上编译问题的解决汇总

    目前自己的开发环境(同将来线上环境)是centos 7.我这里主要实现服务端.需要组里其他同学提供一个接口(视频编辑).公司内部自己开发环境 通常是台式ubuntu16.04.所以提供视频处理接口是在 ...

  8. CentOS7 下使用root免密码输入自动登入gnome桌面

    如果系统默认启动图形界面: vi /etc/gdm/custom.conf #找到[daemon],修改为下面的 [daemon] AutomaticLoginEnable=true Automati ...

  9. 探索未知种族之osg类生物--渲染遍历之GraphicsContext::runOperations

    osg::GraphicsContext::runOperations().我们先来看一下这个函数的执行过程. ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 ...

  10. 201621123002《Java程序设计》第七周学习总结

    1. 本周学习总结 1.1 思维导图:Java图形界面总结 2.书面作业 1. GUI中的事件处理 1.1 写出事件处理模型中最重要的几个关键词. 事件源,事件处理方法,事件监听器 事件源(Event ...