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. jQuery通过event获取点击事件的事件对象

    要想搞明白js的事件机制,必须搞清楚几个概念:事件对象,事件源,还有事件流 事件对象: 当事件发生时会产生事件对象,事件对象的作用是用来记录“事件发生是一些相关的信息.注意事件对象只有在事件发生时才会 ...

  2. js/jq仿window文件夹移动/剪切/复制等操作

    1.先看下效果吧! 2.在添加一个index.html <!DOCTYPE html> <html lang="en"> <head> < ...

  3. Swift具体解释之六----------------枚举、结构体、类

    枚举.结构体.类 注:本文为作者自己总结.过于基础的就不再赘述 ,都是亲自測试的结果.如有错误或者遗漏的地方.欢迎指正,一起学习. 1.枚举 枚举是用来定义一组通用类型的一组相关值 ,关键字enum ...

  4. ftk学习记（输入框篇）

    [ 声明:版权全部.欢迎转载.请勿用于商业用途. 联系信箱:feixiaoxing @163.com] 昨天讲了进度条,我们还是看看它的运行效果是怎么样的.截图例如以下, 进度条使用的情况还是比較多的 ...

  5. ARP病毒查找与防范

    笔者是一名大学生,学的是网络project. 自然接触的网络就多了.当然免不了做些坏事,嘿嘿. 比如我经经常使用在网上学习的知识去測验一下我自己的电脑或者同学啥的,都是一些小打小闹. 无伤大雅,知道有 ...

  6. android 4.0主线程訪问网络问题

    在4.0下面,在主线程中訪问网络,假设请求超过6s的话,就会报ANR,那么这就会带来一个问题,假设网络慢或者请求的数据过大时,界面会卡顿,造成界面灵敏性非常差,因此网络请求一般不能放在主线程中操作,g ...

  7. 初探C++运算符重载学习笔记&lt;2&gt; 重载为友元函数

    初探C++运算符重载学习笔记 在上面那篇博客中,写了将运算符重载为普通函数或类的成员函数这两种情况. 以下的两种情况发生.则我们须要将运算符重载为类的友元函数 <1>成员函数不能满足要求 ...

  8. _io.TextIOWrapper

    ''' SELECT * FROM Info_Roles WHERE Flag=1 LIMIT 2; select top y * from 表 where 主键 not in(select top ...

  9. python 数据描述字符串转整数

    q3 = int(float(q3.replace('万', '')) * 10000)

  10. oc74--NSMutableArray

    // // main.m // NSMutableArray ,可变数组 #import <Foundation/Foundation.h> int main(int argc, cons ...