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

(编辑：jimmy 日期: 2026/1/18 浏览：2)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"         "http://www.w3.org/TR/html4/strict.dtd"> <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, http://www.robertnyman.com     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 </head> <body>  <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>       <thead>                      <th class="null"> </th>             <th class="stones">Rolling Stones</th>             <th class="u2">U2</th>             <th class="crue">Mötley Crüe</th>              </thead>                           <th>Lead Vocals</th>             Mick Jagger             Bono             Vince Neil                               <th>Lead Guitar</th>             Keith Richards             The Edge             Mick Mars                               <th>Bass Guitar</th>             Ron Wood             Adam Clayton             Nikkie Sixx                               <th>Drums</th>             Charlie Watts             Larry Mullen, Jr.             Tommy Lee                </body> </html> 本篇文章来源于 cssrain.cn 原文链接：http://www.cssrain.cn/article.asp?id=20

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

上一篇：告诉大家什么是JSON

下一篇：javascript下兼容firefox选取textarea文本的代码

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

一句话新闻