思路：
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. persistence.xml文件的妙处

    在上家公司,经常要做的一个很麻烦的事就是写sql脚本, 修改了表结构,比如增加一个新字段的时候,都必须要写sql并放入指定目录中, 目的就是为了便于当我们把代码迁移到其他数据库中的时候,再来执行这些s ...

  2. Web前端工程师成长之路——知识汇总

    一.何为Web前端工程师?          前端工程师,也叫Web前端开发工程师.他是随着web发展,细分出来的行业.Web前端开发工程师,主要职责是利用(X)HTML/CSS/JavaScript ...

  3. NMAP分布式扫描工具dnmap

    NMAP分布式扫描工具dnmap   NMAP是一款知名的网络扫描工具.它提供丰富和强大的网络扫描功能.但很多时候,需要渗透测试人员从多个终端发起扫描任务,以快速扫描大型网络,或规避IP限制等安全策略 ...

  4. PDA无线数据采集器在仓库管理系统中的应用

    条码数据采集器在仓库管理系统中的应用,条码数据采集器,顾名思义就是通过扫描货物条码,对货物进行数量分类采集,方便仓库正规化管理.条码数据采集器是现代化条码仓库管理系统中不可缺少的一部分,能提升企业的整 ...

  5. css的padding

  6. MySQL学习笔记02_数据库和表的基本操作

    02_1 操作数据库 (1)创建数据库 CREATE DATABASE [IF NOT EXISTS] db_name [create_specification[, create_specifica ...

  7. [ACM训练] 算法初级 之 基本算法 之 枚举(POJ 1753+2965)

    先列出题目: 1.POJ 1753 POJ 1753  Flip Game:http://poj.org/problem?id=1753 Sample Input bwwb bbwb bwwb bww ...

  8. PS特效精粹

    冲击有力的广告效果 神奇画笔功能 + 强大的图层样式 Photoshop中的三维特效

  9. Web API 之CRUD

    注:例子来自微软Web API官网(https://www.asp.net/web-api/overview/data/using-web-api-with-entity-framework/part ...

  10. view的滑动冲突解决方案

    一.常见的滑动冲突场景 1.外部滑动方向和内部滑动方向不一致 2.外部滑动方向和内部滑动方向一致 3.上面两种情况的嵌套 二.滑动冲突处理的原则 场景1的处理原则是:当用户左右滑动时,需要让外部的vi ...