注册
登录
标签
在线时间兑换积分
帮助
精品酷站论坛
»
CSS代码交流
» table美化-鼠标滑动单元格变色.
‹‹ 上一主题
|
下一主题 ››
发新话题
发布投票
发布商品
发布悬赏
发布活动
发布辩论
发布视频
打印
[css提高]
table美化-鼠标滑动单元格变色.
tension
管理员
个人空间
发短消息
加为好友
当前离线
1
#
大
中
小
发表于 2008-6-13 10:58
只看该作者
table美化-鼠标滑动单元格变色.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <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个是关键 --pickbar.com */ 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>
提示:您可以先修改部分代码再运行
UID
1
帖子
734
精华
25
积分
1860
阅读权限
200
在线时间
13 小时
注册时间
2007-5-26
最后登录
2008-10-6
查看详细资料
TOP
‹‹ 上一主题
|
下一主题 ››
设计人
网页设计
设计师加油
平面设计
摄影图片
插画
代码交流区
CSS代码交流
WEB2.0 / AJAX
JS,UI框架开发
JQuery
mootools
ProtoType
DHTML eXtensions
ASP,PHP,JSP...
资源共享区
酷站资源
提交酷站
PS笔刷/样式/滤镜&插件
开源软件
免费资源区
实用软件/手册
娱乐其他
灌水专区
娱乐时尚
IT风向标
社会新闻
娱乐八卦
投资理财
智力游戏
站务区
站务管理
控制面板首页
编辑个人资料
积分记录
公众用户组
个人空间管理
基本概况
版块排行
主题排行
发帖排行
积分排行
交易排行
在线时间
管理团队
393张高清晰web2.0站点截图
425款精品毛笔墨迹+38款墨迹底纹..
10位Master级别的Photoshop高手
绝对漂亮的笔刷
Soul 近期新作品欣赏..
熟女养成日志—长草
魔幻抽象/吸血鬼传说!!
photoshop仿CG滤镜
新手必看:积分、资源币、人民币、用户级别、发贴教程
设计QQ群:31195683