javascript table美化鼠标滑动单元格变色
本文转载自：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">
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>