思路：
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. 在 case 语句中使用字符串-转

    http://www.cnblogs.com/del/archive/2008/07/08/1237856.html 非常遗憾 Delphi 的 case 语句不支持字符串, 但我觉得这也可能是基于效 ...

  2. iOS之TimeLine(时间轴)的实现

    这是一个关于OC时间轴的简单实现,我认为重要的是思路. 感谢作者:Cyandev 的文章<iOS 实现时间线列表效果>给的思路.这里先附上Objective-C的代码实现,有时间再去试试S ...

  3. 【刷题记录】GCJ 2.71~2.72

    GCJ 271 [题目大意] Minimum Scalar Product 有两个东西(滑稽)v1=(x1,x2,x3,……,xn)和v2=(y1,y2,……yn),允许任意交换v1和v2中各数字的顺 ...

  4. TFS 分支导致nuget项目依赖丢失

    问题: 项目的代码 在tfs上分支后,签出项目.编译时发现无法编译,原有的nuget来的包的dll都丢失了(项目签入时,默认会忽略dll) 在网上找了下,发现一个简单的解决方法: 在"程序包 ...

  5. 配置gradle.properties

    在一些项目中会分拆app 和 lib , 这时候引用support的时候,一旦更改版本会出现需要同步更改两个地方的问题.这种情况,可以通过配置gradle.properties实现替换. 在项目编译过 ...

  6. 【SRM】518 Nim

    题意 \(K(1 \le K \le 10^9)\)堆石子,每堆石子个数不超过\(L(2 \le 50000)\),问Nim游戏中先手必败局面的数量,答案对\(10^9+7\)取模. 分析 容易得到\ ...

  7. Angular 单元格合并

    在Angular实现表格输出的话,使用ng-repeat输出信息, 使用了: ng-repeat-start ng-repeat-end ng-hide="$first" < ...

  8. Java jvisualvm简要说明

    jvisualvm能干什么:监控内存泄露,跟踪垃圾回收,执行时内存.cpu分析,线程分析... jvisualvm已经被集成在jdk1.6以上的版本中(不是jre).自身运行需要最低jdk1.6版本, ...

  9. 初次接触nodejs，请多指教。

    一  安装nodejs 1.下载node.js.在http://nodejs.org/download/下载最新版的node.exe文件,我下载时是v0.10.33.下载完成后,在F盘新建nodejs ...

  10. 通过NFS（nfsroot）启动linux系统

    Mounting the root filesystem via NFS (nfsroot) 英文原文位于inux内核源代码中的"Documentation/filesystems/nfs/ ...