思路:
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. [spring源码学习]九、IOC源码-applicationEventMulticaster事件广播

    一.代码实例 回到第IOC的第七章context部分,我们看源码分析部分,可以看到在spring的bean加载之后的第二个重要的bean为applicationEventMulticaster,从字面 ...

  2. TF-IDF算法确定阅读主题词解答英语阅读Title题目

    #include <math.h> #include <time.h> #include <stdlib.h> #include <iostream> ...

  3. Xcode playground markdown常用语法

    //: **Bold** *Italic* /*: # h1 ## h2 ### h3 #### h4 h5 h6 same as h3 --- --- --- * blank seperate li ...

  4. 【NEUQACM OJ】1017: 平面切割(特别版)

    1017: 平面切割(特别版) 题目描述 我们要求的是n条闪电型折线分割平面的最大数目.比如,一条闪电型折线可以将平面分成两部分,两条最多可以将平面分成12部分,三条最多可将平面分成31部分,四条最多 ...

  5. 【SRM】649 t2

    题意 一个数列\(A\),数的范围均在\([0, 2^N-1]\)内,求一个\(B\),使得新生成的数列\(C\)中逆序对最多(\(C_i = A_i xor B\)),输出最多的逆序对.(\(|A| ...

  6. 我的前端故事----优美的编辑器GitHub Atom

    很多前端的同学都在用sublime text,我之前也在使用,但是后来接触到了Atom,就被它的高颜值深深的吸引了~~不愧是GitHub的工程师哦~审美就是高  Atom 作为一个跨平台的编辑软件,安 ...

  7. How to make your assembly more secure from referencing by unauthorized bits

    Now the security has a trend to become more and more important in our daily work, hence I did some r ...

  8. java 过滤表情符号

    /** * 过滤表情符号 * @create by ldw on 2016-10-25 * @param str * @return str(去掉表情符号的字符串) * @version 1.0 * ...

  9. 日常关键字:定时关机、该任务映像已损坏或已篡改.(0x80041321)、ChaZD生词同步扇贝

    我在床上用chinanet网络慢得简直令人发指,12B/S.是的你没有看错,这是我最常看到的网速.但是我最近发现电脑联网开出一个WiFi,在床上用手机上网时,网速会一点提升,可达到1KB/S(⊙﹏⊙) ...

  10. sass

    本文来自阮一峰http://www.ruanyifeng.com/blog/2012/06/sass.html 学过CSS的人都知道,它不是一种编程语言. 你可以用它开发网页样式,但是没法用它编程.也 ...