首页 爱情文章 亲情文章 友情文章 生活随笔 校园文章 经典文章 人生哲理 励志文章 搞笑文章 心情日记
  • 爱情文章
  • 亲情文章
  • 友情文章
  • 生活随笔
  • 校园文章
  • 经典文章
  • 人生哲理
  • 励志文章
  • 搞笑文章
  • 心情日记
  • 英语文章
  • 范文大全
  • 作文大全
  • 新闻阅读
    •
    当前位置: 山茶花美文网 > 心情日记 > 正文

    excel怎么合并单元格【table美化-鼠标滑动单元格变色】

    时间：2018-08-10来源：山茶花美文网 本文已影响 人 山茶花美文网手机站

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "<a href="http://www.w3.org/TR/html4/strict.dtd" target="_blank">http://www.w3.org/TR/html4/strict.dtd</a>">
    <html lang="en">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <title>orbitz-like behavior for hovering over table cells</title>
    <style type="text/CSS">
    .cssguycomments {background:#eee;border:#ddd;padding:8px;margin-bottom:40px;}
    .cssguycomments 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 th.null {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个是关键   –cssrain.cn */
    tbody td.on {background:green;}  
    thead th.on {background:red;}
    tbody th.on {background:red;}
    </style>

    <script type="text/javascript">
    /*
    For functions getElementsByClassName, addClassName, and removeClassName
    Copyright Robert Nyman, <a href="http://www.knowsky.com" target="_blank">http://www.knowsky.com</a>
    Free to use if this text is included
    */
    function addLoadEvent(func) {
      var oldonload = window.onload;
      if (typeof window.onload != ‘function’) {
        window.onload = func;
      } else {
        window.onload = 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 == "*" && elm.all)? elm.all : elm.getElementsByTagName(tag);
        var returnElements = [];
        var current;
        var length = elements.length;
        for(var i=0; i<length; i++){
            current = elements[i];
            if(testClass.test(current.className)){
                returnElements.push(current);
            }
        }
        return returnElements;
    }

    function addClassName(elm, className){
        var currentClass = elm.className;
        if(!new RegExp(("(^|s)" + className + "(s|$)"), "i").test(currentClass)){
            elm.className = currentClass + ((currentClass.length > 0)? " " : "") + className;
        }
        return elm.className;
    }

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

    function makeTheTableHeadsHighlight() {
        // get all the td’s in the heart of the table…
        var table = document.getElementById(’rockartists’);
        var tbody = table.getElementsByTagName(’tbody’);
        var tbodytds = table.getElementsByTagName(’td’);
        // and loop through them…
        for (var i=0; i<tbodytds.length; i++) {
        // take note of their default class name
            tbodytds[i].oldClassName = tbodytds[i].className;
        // when someone moves their mouse over one of those cells…
            tbodytds[i].onmouSEOver = function() {
        // attach ‘on’ to the pointed cell
                addClassName(this,’on’);
        // attach ‘on’ to the th in the thead with the same class name
                var topheading = getElementsByClassName(this.oldClassName,’th’,table);
                addClassName(topheading[0],’on’);
        // attach ‘on’ to the far left th in the same row as this cell
                var row = this.parentNode;
                var rowheading = row.getElementsByTagName(’th’)[0];
                addClassName(rowheading,’on’);
            }
        // ok, now when someone moves their mouse away, undo everything we just did.
            tbodytds[i].onmouseout = function() {
        // remove ‘on’ from this cell
                removeClassName(this,’on’);
        // remove ‘on’ from the th in the thead
                var topheading = getElementsByClassName(this.oldClassName,’th’,table);
                removeClassName(topheading[0],’on’);

        // remove ‘on’ to the far left th in the same row as this cell
                var row = this.parentNode;
                var rowheading = row.getElementsByTagName(’th’)[0];
                removeClassName(rowheading,’on’);
            }
        }
    }
    addLoadEvent(makeTheTableHeadsHighlight);
    </script>
    </head>
    <body>

    <div class="cssguycomments">
    <p>Final example with Javascript applied.  Hover over a table cell to see effects.  "View Source" and copy if you’d like to use.</p>
    </div>

    <table id="rockartists">
        <thead>
            <tr>
                <th class="null"> </th>
                <th class="stones">Rolling Stones</th>
                <th class="u2">U2</th>
                <th class="crue">Mötley Crüe</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>Lead Vocals</th>
                <td class="stones">Mick Jagger</td>
                <td class="u2">Bono</td>
                <td class="crue">Vince Neil</td>
            </tr>
            <tr>
                <th>Lead Guitar</th>
                <td class="stones">Keith Richards</td>
                <td class="u2">The Edge</td>
                <td class="crue">Mick Mars</td>
            </tr>
            <tr>
                <th>Bass Guitar</th>
                <td class="stones">Ron Wood</td>
                <td class="u2">Adam Clayton</td>
                <td class="crue">Nikkie Sixx</td>
            </tr>
            <tr>
                <th>Drums</th>
                <td class="stones">Charlie Watts</td>
                <td class="u2">Larry Mullen, Jr.</td>
                <td class="crue">Tommy Lee</td>
            </tr>
        </tbody>
    </table>

    </body>

    </html>

    • excel怎么合并单元格【table美化-鼠标滑动单元格变色】 相关文章:
    • 爱情文章
    • 亲情文章
    • 友情文章
    • 随笔
    • 哲理
    • 励志
    • 范文大全

    最新文章

    热点文章

    推荐访问

    军训远足心得体会 军训爬山心得体会 大学军训徒步拉练感想 军训徒步作文 军训徒步10公里感想 军训徒步心得体会 5分钟演讲中秋节节日 中秋一分钟演讲 中秋节演讲稿4分钟 中秋节演讲稿一分钟 中秋节演讲稿五分钟 3-5分钟 中秋节短篇演讲稿 中秋节演讲稿两分钟 中秋节的演讲稿3分钟 关于中秋节的演讲稿三分钟 孩子体验军训的心得 参加孩子军训活动的感受与收获 家长对孩子军训后的收获和感悟 小孩军训的收获与感悟 学生军训的收获与感悟 孩子军训成长过程家长感悟 孩子军训感悟 孩子军训心得体会 孩子军训的收获与感悟 兵役前训练心得体会 部队当兵的心得 新兵役前教育训练心得体会 预备役军训心得体会 新兵军训感悟

    本文excel怎么合并单元格【table美化-鼠标滑动单元格变色】由山茶花美文网整理提供，版权归原作者、原出处所有。

    Copyright © 山茶花美文网 All Rights Reserved.