思路：
1、获取所有行对象，将需要间隔颜色显示的行对象进行动态的className属性指定；
     前提是：先定义好类选择器，就是说给行对象赋予name.
2、高亮用到两个事件：onmouseover（鼠标进入事件）、onmouseout（鼠标移
     出事件）
3、为了方便可以在遍历行对象时将每一个行对象都进行两个事件属性的制度，并通
     过匿名函数完成该事件的处理；
4、高亮的原理：将鼠标进入时颜色改变，改变前先记录下原行对象的样式，在鼠标
     离开时，将该样式还原；
5、改样式需要在页面加载完成后直接显示，所以使用window.onload事件完成指定。
 
代码如下：
 
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>表格颜色间隔显示，鼠标停留行高亮显示</title>
    <style type="text/css">
        table{
            border:#1A34E8 1px solid;
            width:300px;
        }
        table td{
            border:#CB7C0A 1px solid;
            text-align: center;
            width: 100px;
        }
        table th{
            border:#CB7C0A 1px solid;
           
            text-align: center;
            width: 100px;
        }
        .one{
           
        }
        .two{
           
        }
        .over{/*高亮颜色*/
           
        }
    </style>
    <script type="text/javascript">
        /*行颜色间隔显示*/
        function trcolor(){
            var tabNode = document.getElementsByTagName("table")[0];
            var trs = tabNode.rows;
 
            for(var i=0; i<trs.length; i++){
                if(i%2 == 1)
                    /*定义奇数行颜色:把类名one赋给奇数行*/
                    trs[i].className = "one";
                else
                    /*定义偶数行颜色:把类名two赋给偶数行*/
                    trs[i].className = "two";
               /*鼠标进入行颜色高亮显示*/
                var name;//用来记录行原来的颜色
                /*动态添加事件*/
                trs[i].onmouseover = function(){
                    name = this.className;//记录下行原来的颜色
                    this.className = "over";
                };
                trs[i].onmouseout = function(){
                    this.className = name;
                }
            }
        }
        // /*鼠标进入高亮显示*/
        // var name;//用来记录行原来的颜色
        // function over(trNode){
        //     name = trNode.className;//记录下行原来的颜色
        //     trNode.className = "over";
        // }
        // /*鼠标移出恢复 */
        // function out(trNode){
        //     trNode.className = name;//恢复原来的颜色
        // }
 
        /*窗口加载时就执行trcolor函数*/
        window.onload = trcolor;
    </script>
</head>
<body>
    <table>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>地址</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>19</td>
            <td>邯郸市</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>21</td>
            <td>石家庄市</td>
        </tr>
        <tr>
            <td>王五</td>
            <td>18</td>
            <td>邢台市</td>
        </tr>
        <tr>
            <td>赵六</td>
            <td>20</td>
            <td>唐山市</td>
        </tr>
        <tr>
            <td>周八</td>
            <td>22</td>
            <td>衡水市</td>
        </tr>
        <tr>
            <td>田七</td>
            <td>19</td>
            <td>沧州市</td>
        </tr>
        <tr>
            <td>王二小</td>
            <td>19</td>
            <td>保定市</td>
        </tr>
    </table>
</body>
</html>
 

JS实战 · 表格行颜色间隔显示，并在鼠标指定行上高亮显示的更多相关文章

  1. JS基础(二)事件监听练习之table鼠标悬停行变色

    JS监听事件简单学习: [object].addEvent("事件类型","处理函数","冒泡事件或捕获事件");   [object].r ...

  2. 使用JS创建表格以及隔行换色（包括隔N行换色）

    <html> <head> <title></title> <style> table{ width:800px; border-colla ...

  3. 在Linux中使用vi打开文件时如何显示行号，及跳转到指定行

    vi 文件名,打开文件后 如果要显示所有行号,使用 :set nu 如果要显示当前行号,使用 :nu 如果要跳转到指定行,使用 :行号 例如,跳转到第10行,使用 :10

  4. SQL查询显示行号、随机查询、取指定行数据

    转自:walkingp 1.显示行号 如果数据没有删除的情况下主键与行号是一致的,但在删除某些数据,行号就与主键不一致了,这时需要查询行号就需要用新的方法,在SQL Server2005之前,需要使用 ...

  5. js控制表格单双行颜色交替显示

    <script language="JavaScript"> window.onload = function() { var Table=document.getEl ...

  6. html table单双行颜色间隔（转载）

    直接上代码: <html> <head> <meta http-equiv="Content-Type" content="text/htm ...

  7. js改变,设置table单双行颜色,jquery改变,设置table单双行颜色

    1.js实现单双行以不同颜色显示 $(document).ready(function () { var color = "#ffeab3"; $("#GvList tr ...

  8. js 生成表格及其颜色

    <!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...

  9. （转）用JS实现表格中隔行显示不同颜色

    用JS实现表格中隔行显示不同颜色 第一种: <style> tr{bgColor:expression(     this.bgColor=((this.rowIndex)%2==0 )? ...

随机推荐

  1. 苹果mac电脑中brew的安装使用及卸载详细教程

    brew 又叫Homebrew,是Mac OSX上的软件包管理工具,能在Mac中方便的安装软件或者卸载软件, 只需要一个命令, 非常方便 brew类似ubuntu系统下的apt-get的功能 安装br ...

  2. 二分 题目 压缩打包 Special Judge？ 不不不 当然不是

    http://noi.openjudge.cn/ch0111/ No 题目 分数 01 查找最接近的元素 10 3176 02 二分法求函数的零点 10 2181 03 矩形分割 10 1420 04 ...

  3. C,C++

    C与C++的Struct有何区别,Java有Struct吗,C++里Struct与Class区别: C++虚析构函数作用: static静态变量初始化: 深复制与浅复制区别: const * int ...

  4. Ubuntu install JDK适合像我的小白

    1.#下载JDK,记住保存的目录 2. sudo mkdir /usr/java 3. sudo tar zxvf jdk-7u75-linux-x64.tar.gz -C /usr/java 4. ...

  5. python面试总结

    1.python的优势 1.1 python是一门胶水语言,能够结合各种语言 1.2 python是支持面向对象编程 1.3 python是完全开放源代码,有大量的技术支持文档, 1.4 可移植,py ...

  6. jquery checked

    jquery判断checked的三种方法:.attr('checked):   //看版本1.6+返回:”checked”或”undefined” ;1.5-返回:true或false.prop('c ...

  7. 使用 SWFObject.js 插入Flash

    今天学习了一下使用 SWFObject.js 这个js插入flash. 下载地址:http://code.google.com/p/swfobject/ 这个js的好处 1.IE中没有讨厌的虚框问题了 ...

  8. php 中的 基本区别点

    this.self.parent https://my.oschina.net/jackguo/blog/189020

  9. *CF2.D（哥德巴赫猜想）

    D. Taxes time limit per test 2 seconds memory limit per test 256 megabytes input standard input outp ...

  10. Unity自动寻路Navmesh之高级

    隔离层自动生成寻路网格 (源码scene1.unity) 1.创建Plane实例P1,P2,两者之间出现一条鸿沟.直接控制角色位移是无法通过的. 2.打开Navigation窗口,分别选中P1,P2, ...