蚂蚁论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,访问微社区

查看: 37|回复: 0

javascript table美化鼠标滑动单元格变色

[复制链接]

1979

主题

1

好友

1609

积分

管理员

Rank: 64Rank: 64Rank: 64Rank: 64

  • TA的每日心情
    奋斗
    2016-1-22 16:23
  • 签到天数: 4 天

    [LV.2]偶尔看看I

    荣誉管理 论坛元老 热心会员 活跃会员 最佳新人 灌水之王

    发表于 2017-10-12 20:31:39 |显示全部楼层
    javascript table美化鼠标滑动单元格变色

      

         
        orbitz-like behavior for hovering over table cells

    cssguyments {background:eee;border:ddd;padding:8px;margin-bottom:40px;}
    cssguyments p {font:normal 12px/18px verdana;}

    table    {border-collapse:collapse;}
    thead th {
        font:bold 13px/18px georgia;
        text-align:left;
        background:fff4c6;
        color:333;
        padding:8px 16px 8px 8px;
        border-right:1px solid fff;
        border-bottom:1px solid fff;
    }
    thead thnull {background:fff;}
    tbody th {
        font:bold 12px/15px georgia;
        text-align:left;
        background:fff9e1;
        color:333;
        padding:8px;
        border-bottom:1px solid f3f0e4;
        border-right:1px solid fff;
    }
    tbody td {
        font:normal 12px/15px georgia;
        color:333;
        padding:8px;
        border-right:1px solid f3f0e4;
        border-bottom:1px solid f3f0e4;
    }
    /*  这3个是关键   --cssraincn */
    tbody tdon {background:green;}   
    thead thon {background:red;}
    tbody thon {background:red;}




    /*
        For functions getElementsByClassName, addClassName, and removeClassName
        Copyright Robert Nyman, robertnyman
        Free to use if this text is included
    */
    function addLoadEvent(func) {
      var oldonload = windowonload;
      if (typeof windowonload != 'function') {
        windowonload = func;
      } else {
        windowonload = function() {
          oldonload();
          func();
        }
      }
    }

    function getElementsByClassName(className, tag, elm){
        var testClass = new RegExp("(^|\\s)" + className + "(\\s|$)");
        var tag = tag || "*";
        var elm = elm || document;
        var elements = (tag == "*"  elmall)? elmall : elmgetElementsByTagName(tag);
        var returnElements = [];
        var current;
        var length = elementslength;
        for(var i=0; i 0)? " " : "") + className;
        }
        return elmclassName;
    }

    function removeClassName(elm, className){
        var classToRemove = new RegExp(("(^|\\s)" + className + "(\\s|$)"), "i");
        elmclassName = elmclassNamereplace(classToRemove, "")replace(/^\s+|\s+$/g, "");
        return elmclassName;
    }

    function makeTheTableHeadsHighlight() {
        // get all the td's in the heart of the table
        var table = documentgetElementById('rockartists');
        var tbody = tablegetElementsByTagName('tbody');
        var tbodytds = tablegetElementsByTagName('td');
         
        // and loop through them
        for (var i=0; i







    Final example with JavaScript applied  Hover over a table cell to see effects  "View Source" and copy if you'd like to use



         
             
                  
                Rolling Stones
                U2
                Mouml;tley Crüe
             
         
         
             
                Lead Vocals
                Mick Jagger
                Bono
                Vince Neil
             
             
                Lead Guitar
                Keith Richards
                The Edge
                Mick Mars
             
             
                Bass Guitar
                Ron Wood
                Adam Clayton
                Nikkie Sixx
             
             
                Drums
                Charlie Watts
                Larry Mullen, Jr
                Tommy Lee
             
         







    本篇文章来源于 cssraincn 原文链接:cssraincn/articleasp?id=20
      [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
    您需要登录后才可以回帖 登录 | 立即注册

    关闭

    蚂蚁站长论坛推荐上一条 /1 下一条

    QQ|Archiver|手机版|广告服务|蚂蚁站长-站长之家 ( 黔ICP备16008478号-1  

    GMT+8, 2017-10-23 06:49

    Powered by 站长论坛

    © 2007-2013 Jzant.com Inc.

    回顶部