资料
表格
制度
合同
管理
职场
经营
创业
范文
总结
计划
作文
文章
美文
词句
教程
模板
图片
字体
图标
办公
人事
财务
生产
管理资源吧首页
>>>
教程
>>>
编程
>>>
JavaScript教程
>>>
javascript table美化鼠标滑动单元格变色
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "<a href="http://www.w3.org/TR/html4/strict.dtd" _ewebeditor_ta_href="http%3A%2F%2Fwww.w3.org%2FTR%2Fhtml4%2Fstrict.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> <img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%20%0D%0A%2F*%20%0D%0A%20%20%20%20For%20functions%20getElementsByClassName%2C%20addClassName%2C%20and%20removeClassName%20%0D%0A%20%20%20%20Copyright%20Robert%20Nyman%2C%20%3Ca%20href%3D%22http%3A%2F%2Fwww.robertnyman.com%22%20target%3D%22_blank%22%3Ehttp%3A%2F%2Fwww.robertnyman.com%3C%2Fa%3E%20%0D%0A%20%20%20%20Free%20to%20use%20if%20this%20text%20is%20included%20%0D%0A*%2F%20%0D%0Afunction%20addLoadEvent(func)%20%7B%20%0D%0A%20%20var%20oldonload%20%3D%20window.onload%3B%20%0D%0A%20%20if%20(typeof%20window.onload%20!%3D%20'function')%20%7B%20%0D%0A%20%20%20%20window.onload%20%3D%20func%3B%20%0D%0A%20%20%7D%20else%20%7B%20%0D%0A%20%20%20%20window.onload%20%3D%20function()%20%7B%20%0D%0A%20%20%20%20%20%20oldonload()%3B%20%0D%0A%20%20%20%20%20%20func()%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%20%20%7D%20%0D%0A%7D%20%0D%0A%0D%0Afunction%20getElementsByClassName(className%2C%20tag%2C%20elm)%7B%20%0D%0A%20%20%20%20var%20testClass%20%3D%20new%20RegExp(%22(%5E%7C%5C%5Cs)%22%20%2B%20className%20%2B%20%22(%5C%5Cs%7C%24)%22)%3B%20%0D%0A%20%20%20%20var%20tag%20%3D%20tag%20%7C%7C%20%22*%22%3B%20%0D%0A%20%20%20%20var%20elm%20%3D%20elm%20%7C%7C%20document%3B%20%0D%0A%20%20%20%20var%20elements%20%3D%20(tag%20%3D%3D%20%22*%22%20%26%26%20elm.all)%3F%20elm.all%20%3A%20elm.getElementsByTagName(tag)%3B%20%0D%0A%20%20%20%20var%20returnElements%20%3D%20%5B%5D%3B%20%0D%0A%20%20%20%20var%20current%3B%20%0D%0A%20%20%20%20var%20length%20%3D%20elements.length%3B%20%0D%0A%20%20%20%20for(var%20i%3D0%3B%20i%3Clength%3B%20i%2B%2B)%7B%20%0D%0A%20%20%20%20%20%20%20%20current%20%3D%20elements%5Bi%5D%3B%20%0D%0A%20%20%20%20%20%20%20%20if(testClass.test(current.className))%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20returnElements.push(current)%3B%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%7D%20%0D%0A%20%20%20%20return%20returnElements%3B%20%0D%0A%7D%20%0D%0A%0D%0Afunction%20addClassName(elm%2C%20className)%7B%20%0D%0A%20%20%20%20var%20currentClass%20%3D%20elm.className%3B%20%0D%0A%20%20%20%20if(!new%20RegExp((%22(%5E%7C%5C%5Cs)%22%20%2B%20className%20%2B%20%22(%5C%5Cs%7C%24)%22)%2C%20%22i%22).test(currentClass))%7B%20%0D%0A%20%20%20%20%20%20%20%20elm.className%20%3D%20currentClass%20%2B%20((currentClass.length%20%3E%200)%3F%20%22%20%22%20%3A%20%22%22)%20%2B%20className%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%20%20%20%20return%20elm.className%3B%20%0D%0A%7D%20%0D%0A%0D%0Afunction%20removeClassName(elm%2C%20className)%7B%20%0D%0A%20%20%20%20var%20classToRemove%20%3D%20new%20RegExp((%22(%5E%7C%5C%5Cs)%22%20%2B%20className%20%2B%20%22(%5C%5Cs%7C%24)%22)%2C%20%22i%22)%3B%20%0D%0A%20%20%20%20elm.className%20%3D%20elm.className.replace(classToRemove%2C%20%22%22).replace(%2F%5E%5Cs%2B%7C%5Cs%2B%24%2Fg%2C%20%22%22)%3B%20%0D%0A%20%20%20%20return%20elm.className%3B%20%0D%0A%7D%20%0D%0A%0D%0Afunction%20makeTheTableHeadsHighlight()%20%7B%20%0D%0A%20%20%20%20%2F%2F%20get%20all%20the%20td's%20in%20the%20heart%20of%20the%20table...%20%0D%0A%20%20%20%20var%20table%20%3D%20document.getElementById('rockartists')%3B%20%0D%0A%20%20%20%20var%20tbody%20%3D%20table.getElementsByTagName('tbody')%3B%20%0D%0A%20%20%20%20var%20tbodytds%20%3D%20table.getElementsByTagName('td')%3B%20%0D%0A%20%20%20%20%20%0D%0A%20%20%20%20%2F%2F%20and%20loop%20through%20them...%20%0D%0A%20%20%20%20for%20(var%20i%3D0%3B%20i%3Ctbodytds.length%3B%20i%2B%2B)%20%7B%20%0D%0A%20%20%20%20%20%0D%0A%20%20%20%20%2F%2F%20take%20note%20of%20their%20default%20class%20name%20%0D%0A%20%20%20%20%20%20%20%20tbodytds%5Bi%5D.oldClassName%20%3D%20tbodytds%5Bi%5D.className%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%2F%2F%20when%20someone%20moves%20their%20mouse%20over%20one%20of%20those%20cells...%20%0D%0A%20%20%20%20%20%20%20%20tbodytds%5Bi%5D.onmouseover%20%3D%20function()%20%7B%20%0D%0A%20%20%20%20%20%0D%0A%20%20%20%20%2F%2F%20attach%20'on'%20to%20the%20pointed%20cell%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20addClassName(this%2C'on')%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%2F%2F%20attach%20'on'%20to%20the%20th%20in%20the%20thead%20with%20the%20same%20class%20name%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20topheading%20%3D%20getElementsByClassName(this.oldClassName%2C'th'%2Ctable)%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20addClassName(topheading%5B0%5D%2C'on')%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%2F%2F%20attach%20'on'%20to%20the%20far%20left%20th%20in%20the%20same%20row%20as%20this%20cell%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20row%20%3D%20this.parentNode%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20rowheading%20%3D%20row.getElementsByTagName('th')%5B0%5D%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20addClassName(rowheading%2C'on')%3B%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%0D%0A%20%20%20%20%2F%2F%20ok%2C%20now%20when%20someone%20moves%20their%20mouse%20away%2C%20undo%20everything%20we%20just%20did.%20%0D%0A%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20tbodytds%5Bi%5D.onmouseout%20%3D%20function()%20%7B%20%0D%0A%20%20%20%20%20%0D%0A%20%20%20%20%2F%2F%20remove%20'on'%20from%20this%20cell%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20removeClassName(this%2C'on')%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%2F%2F%20remove%20'on'%20from%20the%20th%20in%20the%20thead%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20topheading%20%3D%20getElementsByClassName(this.oldClassName%2C'th'%2Ctable)%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20removeClassName(topheading%5B0%5D%2C'on')%3B%20%0D%0A%0D%0A%20%20%20%20%2F%2F%20remove%20'on'%20to%20the%20far%20left%20th%20in%20the%20same%20row%20as%20this%20cell%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20row%20%3D%20this.parentNode%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20rowheading%20%3D%20row.getElementsByTagName('th')%5B0%5D%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20removeClassName(rowheading%2C'on')%3B%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%7D%20%0D%0A%7D%20%0D%0AaddLoadEvent(makeTheTableHeadsHighlight)%3B%20%0D%0A%3C%2Fscript%3E"> </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需刷新才能执行
]
教程首页
更多教程