设为首页 | 联系站长
首  页 公司简介 企业建站 网站优化 电脑服务 成功案例 空间租用 建站资源 联系我们
   
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 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.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">
<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>

作者:webceo / 发布日期:2009-3-26 9:42:39
 
            互联网动态
  
   联系电话:0371-63697306/08
   传真号码:0371-63697308
     Email:zzjianzhan@163.com
 热线电话:13253387239
            常见问题解答
   
版权所有©2006-2008郑州建站网络公司  豫ICP备07500720号