javascripttable美化鼠标滑动单元格变色_javascript技巧

来源：动视网责编：小采时间：2020-11-27 20:39:27

javascripttable美化鼠标滑动单元格变色_javascript技巧

javascripttable美化鼠标滑动单元格变色_javascript技巧: orbitz-like behavior for hovering over table cells .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

推荐度：

点击下载本文 文档为doc格式

导读javascripttable美化鼠标滑动单元格变色_javascript技巧: orbitz-like behavior for hovering over table cells .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

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

/* 
 For functions getElementsByClassName, addClassName, and removeClassName 
 Copyright Robert Nyman, http://www.robertnyman.com 
 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 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>

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

<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需刷新才能执行]