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

更新时间：2008年06月10日 21:14:21 作者：

效果非常不错的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"> <p>Final example with JavaScript applied.  Hover over a table cell to see effects.  "View Source" and copy if you'd like to use.</p> </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 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

javascript填充默认头像方法
本篇文章通过代码实例给大家讲述了如何javascript填充默认头像以及相代码分享，对此有兴趣的朋友可以学习下。
2018-02-02
js中less常用的方法小结
下面小编就为大家带来一篇js中less常用的方法小结。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-08-08
分享ES6 20个经常使用技巧
这篇文章主要分享ES6 20个经常使用技巧，作用是使JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言，具体使用详情需要的小伙伴可以参考下面文章内容
2022-06-06
pace.js和NProgress.js两个加载进度插件的一点小总结
这两个插件都是关于加载进度动画的，今天就和大家一起了解下pace.js和NProgress.js两个加载进度插件的一点小总结，感兴趣的朋友一起看看吧
2018-01-01
JavaScript数组去重问题的深入研究
这篇文章主要给大家介绍了关于JavaScript数组去重问题的相关资料,一般都是在面试的时候才会碰到,一般是要求手写数组去重方法的代码,需要的朋友可以参考下
2021-10-10
JavaScript中的this例题实战总结详析
使用JavaScript开发的时候,很多人多多少少都会被this的指向问题搞蒙圈,下面这篇文章主要给大家介绍了关于JavaScript中this例题实战的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-06-06
thinkjs之页面跳转同步异步操作
这篇文章主要介绍了thinkjs之页面跳转同步异步操作,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2017-02-02
JS修改地址栏参数实例代码
本文给大家介绍js修改地址栏参数的实例代码，并给大家附上用JS动态改变地址栏内容 window.location.href window.location.hash的方法，比较实用，需要的朋友参考下吧
2016-06-06
禁用键盘上的(全局)指定键兼容iE、Chrome、火狐
确定你是要禁用全局的还是指定控件，如果是全局的就只要监听window.keyDown = function(event){.....} 一样一样的，感兴趣的朋友可以了解下哈
2013-05-05
Array.filter中如何正确使用Async
这篇文章主要介绍了Array.filter中如何正确使用Async,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-11-11

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

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具