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

<！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<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.<br/><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需刷新才能执行]