1、获取tbody下的子元素

2、注册鼠标覆盖事件时存储当时的背景颜色，注册鼠标离开事件时把存储的颜色赋值注册事件对象

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        * {

            padding: 0;

            margin: 0;

            text-align: center;

        }

        div {

            width: 300px;

            margin: 50px auto;

        }

        table {

            width: 300px;

            height: 200px;

            border: 1px solid #ccc;

            border-collapse: collapse;

        }

        th {

            background-color: #09c;

            font: bold 16px "微软雅黑";

            color: #fff;

        }

        th, td {

            border: 1px solid #d0d0d0;

            color: #404060;

            padding: 10px;

        }

        tbody tr {

            background-color: #f0f0f0;

            cursor: pointer;

        }

    </style>

</head>

<body>

    <div>

        <table>

            <thead>

                <tr>

                    <th>序号</th>

                    <th>姓名</th>

                    <th>课程</th>

                    <th>成绩</th>

                </tr>

            </thead>

            <tbody>

                <tr>

                    <td>1</td>

                    <td>你好</td>

                    <td>你好</td>

                    <td>你好</td>

                </tr>

                <tr>

                    <td>2</td>

                    <td>你好</td>

                    <td>你好</td>

                    <td>你好</td>

                </tr>

                <tr>

                    <td>3</td>

                    <td>你好</td>

                    <td>你好</td>

                    <td>你好</td>

                </tr>

                <tr>

                    <td>4</td>

                    <td>你好</td>

                    <td>你好</td>

                    <td>你好</td>

                </tr>

                <tr>

                    <td>5</td>

                    <td>你好</td>

                    <td>你好</td>

                    <td>你好</td>

                </tr>

                <tr>

                    <td>6</td>

                    <td>你好</td>

                    <td>你好</td>

                    <td>你好</td>

                </tr>

            </tbody>

        </table>

    </div>

    <script>

        var tbody = document.getElementsByTagName("tbody")[0];

        var trs = tbody.children;

        var color = "";

        for (var i = 0; i < trs.length; i++) {

            if (i % 2 !== 0) {

                trs[i].style.backgroundColor = "#c3c3c3";

            }

            trs[i].onmouseover = function () {

                color = this.style.backgroundColor;

                this.style.backgroundColor = "#fff";

            }

            trs[i].onmouseout = function () {

                this.style.backgroundColor = color;

            }

        }

    </script>

</body>

</html>

JS——高级各行换色的更多相关文章

  1. 基于jquery 全选、反选、各行换色、单击行选中事件实现代码

    <script language="javascript"> $(document).ready(function(){ //各行换色 $('table tr:odd' ...

  2. JS应用实例1：表格各行换色

    效果如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  3. js之隔行换色

    HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <ti ...

  4. js表格隔行换色和hover效果

    <!--js效果--> <script src="js/jquery.min.js" language="javascript">< ...

  5. css和js处理隔行换色的问题

      <html> <head> <meta charset="utf-8"> <meta name="" conten ...

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

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

  7. JS给TR隔行换色，鼠标经过有动感

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DT ...

  8. 利用JS动态生成隔行换色HTML表格

    用JS生成动态生成表格,行.列由用户输入,并使表格隔行换色 方法一. 代码: <!DOCTYPE html> 2 <html> 3 <head> 4 <tit ...

  9. js课程 4-11 表格如何实现隔行换色

    js课程 4-11 表格如何实现隔行换色 一.总结 一句话总结:表格奇数行和偶数行判断,赋予不同的样式. 1.表格如何隔行换色? 表格奇数行和偶数行判断,赋予不同的样式. 21 <script& ...

随机推荐

  1. codevs1031 质数环

    一个大小为N(N<=17)的质数环是由1到N共N个自然数组成的一个数环,数环上每两个相邻的数字之和为质数.如下图是一个大小为6的质数环.为了方便描述,规定数环上的第一个数字总是1.如下图可用1 ...

  2. codevs——1675 大质数 2

    1675 大质数 2  时间限制: 1 s  空间限制: 1000 KB  题目等级 : 钻石 Diamond 题解       题目描述 Description 小明因为没做作业而被数学老师罚站,之 ...

  3. Linux下使用tcpdump进行抓包（转）

    技巧: 1.可以通过tcpdump抓取某个网卡的包,然后输出日志文件,通过Wireshark进行分析. 2.可以设置Wifi热点,然后通过手机连接这个热点,然后进行tcpdump的分析.而且在Ubun ...

  4. some notes about ADDM and AWR

    Use the sophisticated management and monitoring features of the Oracle DatabaseDiagnostic and Tuning ...

  5. ExtJs--09--javascript对象的方法的3种写法 prototype通过原型设置方法效率最好

    /** * javascript对象的方法的3种写法 推荐第三种 运行效率最好 */ function P(name , age){ this.name = name ; this.age = age ...

  6. 从Linux 2.6.8内核的一个TSO/NAT bug引出的网络问题排查观点(附一个skb的优化点)

    梦中没有错与对,梦中没有恨和悔...最好闭上你的嘴.这样才算可爱...我不会说:这不公道,我不能接受.我会用朴素的文字记录点点滴滴,早上4点多起来,一气呵成最近的收获与评价,愤慨与忏悔. 四年多前的一 ...

  7. nginx源代码分析--框架设计 &amp;　master-worker进程模型

    Nginx的框架设计-进程模型 在这之前,我们首先澄清几点事实: nginx作为一个高性能server的特点.事实上这也是全部的高性能server的特点,依赖epoll系统调用的高效(高效是相对sel ...

  8. C# Json反序列化 C# 实现表单的自动化测试<通过程序控制一个网页> 验证码处理类：UnCodebase.cs + BauDuAi 读取验证码的值(并非好的解决方案) 大话设计模式：原型模式 C# 深浅复制 MemberwiseClone

    C# Json反序列化   Json反序列化有两种方式[本人],一种是生成实体的,方便处理大量数据,复杂度稍高,一种是用匿名类写,方便读取数据,较为简单. 使用了Newtonsoft.Json,可以自 ...

  9. 让ListView回来原来的位置

    让ListView回到原来的位置 当从ListView中的某一个Item跳转到其他的Activity,进行操作之后,ListView可能需要刷新(重新加载数据源),这个时候ListView就会回到原始 ...

  10. Codesys——限定符的使用方法[来自Codesys的Help]

    Qualifier for actions in SFC In order to configure in which way the actions should be associated to ...