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

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > javascript table美化鼠标滑动单元格变色

Javascript: 动态生成select选项全接触; 不刷新页面动态更新select选项，实现两个select相互操作; 网页输入框日期型有效性判定一网打尽; 实用Javascript函数之一(自动将输入文本框中的内容转换成大写字符); 实用Javascript函数之二(自动将输入文本框中的内容转换成小写字符); 实用Javascript函数之三(限制文本输入框中只能输入数字\"0\"到\"9\"); 实用Javascript函数之四(用于对sString字符串进行前空格截除); 实用Javascript函数之五(用于对sString字符串进行后空格截除); 实用Javascript函数之六(截除字符串前后空格); 如何使用交替的滚动标题; 采用DOM模型时创建一个Select节点后，要删除option项的解决方法; javascript函数速查; 利用JavaScript和正则表达式进行丰富的日期判断（给其它项目组的代码，有比较好的编程风格和注释）; 关于字符串的几个有用函数; FileSystemObject 的例子（处理驱动器、文件夹、文件）; 用JScript实现VB.Net,C#的[委托Delegate]:; 得到固定字符位置的函数; IE NC通用的藏鼠标右键一法; Menu; foolpot2001菜单

No. « ‹ 3 4 5 6 › »

技术文章搜索

关键字

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

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-12 浏览: 144 ::

收藏到网摘: n/a

javascript模仿msgbox提示效果代码告诉大家什么是JSON

效果非常不错的table美化，当鼠标滑过去，背景色变换效果

点击运行可以看到效果:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "<a href="http://www.w3.org/TR/html4/strict.dtd" target="_blank">http://www.w3.org/TR/html4/strict.dtd</a>"> <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>
<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>
本篇文章来源于 cssrain.cn 原文链接：http://www.cssrain.cn/article.asp?id=20

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

javascript模仿msgbox提示效果代码告诉大家什么是JSON

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

评论 (0) All