`

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>

分享到：
| 页面中的表格如何画斜线
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics