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

最新推荐文章于 2024-05-09 09:56:15 发布
原创最新推荐文章于 2024-05-09 09:56:15 发布 · 527 阅读
0 ·
CC 4.0 BY-SA版权
文章标签：
#javascript #ViewUI
经(cǎi)验(kēng)总结专栏收录该内容
178 篇文章
订阅专栏
本文介绍了一种使用JavaScript实现的表格单元格悬停高亮显示的效果。当鼠标悬停在表格单元上时，相应的表头和所在行的首个单元格也会被高亮显示，以增强用户体验。
本文转载自：http://www.jb51.net/article/14736.htm
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>orbitz-like behavior for hovering over table cells-jsDoc.cn</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.robertnyman.com" target="_blank">http://www.robertnyman.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">
    Final example with JavaScript applied. Hover over a table cell to see
    effects. "View Source" and copy if you'd like to use.
</div>
<table id="rockartists">
    <thead>
    <tr>
        <th class="null">
        </th>
        <th class="stones">
            Rolling Stones
        </th>
        <th class="u2">
            U2
        </th>
        <th class="crue">
            Mtley Cr
        </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>