table美化-鼠标滑动单元格变色
table美化-鼠标滑动单元格变色
发布时间:2015-05-12 来源:查字典编辑
摘要:orbitz-likebehaviorforhoveringovertablecells.cssguycomments{background...

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

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新脚本HTML教程学习
热门脚本HTML教程学习
网页设计子分类