首页 > 网络编程 > JavaScript > javascript技巧 > javascript鼠标滑动

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

2008-06-10 21:14:21 作者：

效果非常不错的table美化，当鼠标滑过去，背景色变换效果

<!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> 
<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>

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>

本篇文章来源于 cssrain.cn 原文链接：http://www.cssrain.cn/article.asp?id=20

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

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

您可能感兴趣的文章: