思路：
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. jshint 一些选项(转载)

    内容来自: http://www.cnblogs.com/qianduanjingying/p/6185793.html 一些变量的作用: http://www.cnblogs.com/CloudMu ...

  2. VirusAnti_didiwei使用说明

    前言 前段时间说要写的一个专杀框架敌敌畏,后改为强撸敌敌畏,以彰显样本查杀时的气势,现在第一版已经完成了,如下图所示,使用的时候强烈建议控制台使用放大模式,这样就可以看见我花了半天才画好了logo , ...

  3. 1.Linux中安装LNMP过程

    第一步安装mysql过程 安装包mysql-5.0.22.tar.gz,解压tar -zxvf  mysql-5.0.22.tar.gz cd mysql-5.0.22 进行源码安装./configu ...

  4. 转：Delphi 函数大全

    Delphi 函数大全 - xiucaiyao的专栏 - 博客频道 - CSDN.NEThttp://blog.csdn.net/xiucaiyao/article/details/4544039 名 ...

  5. $event 获取对象

    用Angular给元素添加事件时获取可以用 $event 传递当前触发的事件的元素对象 页面上可以这样写 <img ng-src="" alt="" ng ...

  6. IE6图片元素img下高度超出出现多余空白

    将图片转换为块级元素:display:block; 设置图片的垂直对齐方式:vertical-align属性为top,text-top,bottom,text-bottom 设置父元素的字体大小为0p ...

  7. 实验二 c语言文法

    <程序>-><声明>|<程序><函数> <函数>-><修饰符><标识符><形式参数>< ...

  8. PHP注册与登录【2】用户注册

    注册页面 reg.html 负责收集用户填写的注册信息.教程里只列出关键的代码片段,完整的代码附在本节最后. 注册表单 <fieldset> <legend>用户注册</ ...

  9. LINUX常见问题

    FQA1:如何进入linux单用户模式修改root密码 进入单用户模式:1. grub进入启动画面之后,敲入“e”,把光标移动到kernel ...那一行,再敲入“e”,在kernel 一行的最后加上 ...

  10. js库之dojo

    使用dojo源代码 1.下载Dojo 2.dojo目录结构如下 demo/ myModule.js dojo/ dijit/ dojox/ util/ hellodojo.html 3.引入dojo. ...