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. 【POJ3159】Candies（差分约束系统）

    题意:有一些人, 给n个人派糖果,给出m组约束,每组约束包含A,B,c 三个数, 意思是A的糖果数比B少的个数不多于c,即B的糖果数 - A的糖果数<= c . 最后求n 比 1 最多多多少糖果 ...

  2. Hackerrank manasa-and-combinatorics(数学推导)

    题意:有n个字符A,2n个字符B,问你能用这3n个字母组成多少种字符串,使得组成的字符串所有前缀与后缀的B的数目都大于等于A的数目,对答案mod 99991 分析:类似卡特兰数 ans=总方案数-存在 ...

  3. MySQL慢日志切割邮件发送脚本

    #!/bin/bashtime=`date -d yesterday +"%Y-%m-%d"`slowlog='/usr/local/percona/data/slow.log'# ...

  4. 安装Ubuntu 16.04时出现：没有定义根文件系统，请到分区菜单修改

    在安装Ubuntu 16.04时,尤其是选项空闲硬盘新建分区安装时,容易出现这种情况,这个是由于没有配置挂载点导致的,解决方法如下: 在挂在点输入“/”. 原理: Linux和Windows的文件系统 ...

  5. 5、Java并发性和多线程-相同线程

    以下内容转自http://tutorials.jenkov.com/java-concurrency/same-threading.html(使用谷歌翻译): 相同线程(同一线程)是一种并发模型,其中 ...

  6. fastjson将java list转为json字符串

    1.直接用fastjson的静态方法string JSON.toJSONString(list)方法就行,JSON.toJSONString(list)将java list转为json字符串. 2.t ...

  7. Codeforces Round #245 (Div. 1)——Guess the Tree

    题目链接 题意: n个节点,给定每一个节点的子树(包含自己)的节点个数.每一个节点假设有子节点必定大于等于2.求这种数是否存在 n (1 ≤ n ≤ 24). 分析: 用类似DP的思路,从已知開始.这 ...

  8. hdu 4587 推断孤立点+割点+ 删除点之后，剩下多少连通分量

    做了非常久...... 题目链接:  http://acm.hdu.edu.cn/showproblem.php?pid=4587 先枚举删除的第一个点,第二个点就是找割点.没有割点当然也有答案 学到 ...

  9. Solidworks如何另存为和打开OBJ文件

    1 点击工具-插件,勾选ScanTo3D(最好后面的启动也勾选上,否则下次启动将不会默认自动启动这个插件,还需要再做一次才能打开或者另存为OBJ)   2 注意打开零件图的方式,你不能直接打开Soli ...

  10. javascript 数组总结

    数组的创建: 数组可以使用Array构造函数来创建,或者使用[]快速创建. 1. Array构造函数创建数组: 无参数,创建空数组: var arry = new Array(); 参数为一个数字,指 ...