<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01//en" "HTTP://WWW.W3.ORG/TR/HTML4/STRICT.DTD" > <ptml> <pea d> <meta http-equiv= "Content-type" content= "text/html"; Charset=utf-8 "> <title>orbitz-like behavior for hovering over table cells</title> <style type=" Tex T/css "> cssguycomments {background: #eee; border: #ddd;p adding: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; /* These 3 are key--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 R Emoveclassname Copyright Robert Nyman, http://www.robertnyman.com free to use if this text is included * * func tion 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 + (cu Rrentclass.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; The function makethetableheadshighlight () {//Get all the TD's heart of the table ... var table = Documen T.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 ' thead with the same class name var topheading = Getelementsbyclassname (this.o Ldclassname, ' th ', table); Addclassname (Topheading[0], ' on '); Attach ' on ' to the "far left th in" 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, undoEverything we just did. Tbodytds[i].onmouseout = function () {//Remove ' on ' from the This cell removeclassname (this, ' on '); Remove ' on ' thead var topheading = Getelementsbyclassname (this.oldcla Ssname, ' th ', table); Removeclassname (Topheading[0], ' on '); Remove ' on ' to the "far left th" same row as this cell var row = This.parentnode; var rowheading = row.getelementsbytagname (' th ') [0]; Removeclassname (rowheading, ' on '); }} addloadevent (Makethetableheadshighlight); </script> </pead> <body> <div class= "cssguycomments" > <p>final example with JAVASCRI PT applied. Hover over a table cell to the effects. "View Source" and copy if you "D" use.</p> </div> <table id= "rockartists" > <thead> <tr> <th class= "null" > </th&Gt <th class= "Stones" >rolling stones</th> <th class= "U2" >U2</th> <th CLA Ss= "Crue" >mötley crüe</th> </tr> </thead> <tbody> <tr> <th>lead vocals</th> <td class= "Stones" >mick jagger</td> <td C Lass= "U2" >Bono</td> <td class= "crue" >vince neil</td> </tr> <t r> <th>lead guitar</th> <td class= "Stones" >keith richards</td> <TD class= "U2" >the edge</td> <td class= "crue" >mick mars</td> Gt <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 W Atts</td> <td class= "U2" >larry Mullen, jr.</td> <td class= "crue" >tommy L ee</td> </tr> </tbody> </table> </body> </ptml> This article comes from Cssrain. CN original Link: http://www.cssrain.cn/article.asp?id=20
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
