javascript table美化鼠标滑动单元格变色

luanxiyuan

浏览: 1050911 次
性别:
来自: 大连

最近访客更多访客>>

tw119906938

yangyawei2013

kxlele

u012363178

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

页面相关

本文转载自：http://www.jb51.net/article/14736.htm

<html>

<head>

<title>orbitz-like behavior for hovering over table

cells-jsDoc.cn</title>

.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

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>

Final example with JavaScript applied. Hover over a table cell to see

effects. "View Source" and copy if you'd like to use.

</div>

<thead>

<tr>

</th>

Rolling Stones

</th>

</th>

M?tley Cr��e

</th>

</tr>

</thead>

<tbody>

<tr>

<th>

Lead Vocals

</th>

Mick Jagger

</td>

Bono

</td>

Vince Neil

</td>

</tr>

<tr>

<th>

Lead Guitar

</th>

Keith Richards

</td>

The Edge

</td>

Mick Mars

</td>

</tr>

<tr>

<th>

Bass Guitar

</th>

Ron Wood

</td>

Adam Clayton

</td>

Nikkie Sixx

</td>

</tr>

<tr>

<th>

Drums

</th>

Charlie Watts

</td>

Larry Mullen, Jr.

</td>

Tommy Lee

</td>

</tr>

</tbody>

</table>

</body>

</html>

分享到：

详解Windows下通过ODBC方式访问PostgreSQL | 页面中的表格如何画斜线

2012-10-08 22:11
浏览 1201
评论(0)
分类:Web前端
查看更多

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论