`

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>

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

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

相关推荐

    layui实现鼠标移动到单元格上显示数据的方法

    4. 利用JavaScript的事件监听功能（如`mouseover`或`mouseenter`事件），当用户将鼠标指针移动到单元格上时，触发一个函数，这个函数会获取单元格内的数据，并将其显示在layer提示框中。 5. 根据具体需求，可以在...

    程序天下:JavaScript实例自学手册

    9.9 JavaScript遍历table的行和列 9.10 表格按回车自动生成新行 9.11 单击单元格背景变色 9.12 单击表格某行后其他行隐藏 9.13 单击表头实现表格排序 9.14 单击单元格显示行的详细信息 9.15 表格设置为“100%”时...

    《程序天下：JavaScript实例自学手册》光盘源码

    9.9 JavaScript遍历table的行和列 9.10 表格按回车自动生成新行 9.11 单击单元格背景变色 9.12 单击表格某行后其他行隐藏 9.13 单击表头实现表格排序 9.14 单击单元格显示行的详细信息 9.15 表格设置为“100%”时...

    javascript+css仿excel表格效果

    最后，压缩包中的“表格变色”可能是指一个示例，演示了如何通过JavaScript和CSS实现单元格颜色随数据变化的功能。这通常涉及到数据驱动的CSS类切换，例如，当单元格值达到特定条件时，JavaScript会添加一个预定义的...

    JS+CSS的table表格特效

    6. **JavaScript脚本**：`table_js.js`是实现上述交互功能的JavaScript代码库。它可能包含了对DOM操作、事件监听、数据处理等相关函数。例如，可能会有用于全选/全不选的`selectAll()`和`deselectAll()`函数，以及...

    css样式表格

    本压缩包“css样式表格”显然是一个包含各种CSS技巧和方法的资源集合，专门用于创建和美化表格。表格在网页中常用于展示数据，如报告、日程安排、数据库结果等。下面我们将深入探讨如何使用CSS来设计和优化表格。 1...

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