orbitz-like behavior for hovering over table cells .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;} /* 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 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 Final example with JavaScript applied. Hover over a table cell to see effects. "View Source" and copy if you'd like to use. Rolling Stones U2 Mötley Crüe Lead Vocals Mick Jagger Bono Vince Neil Lead Guitar Keith Richards The Edge Mick Mars Bass Guitar Ron Wood Adam Clayton Nikkie Sixx Drums Charlie Watts Larry Mullen, Jr. Tommy Lee 本篇文章来源于 cssrain.cn 原文链接：http://www.cssrain.cn/article.asp?id=20 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

　　推荐阅读

　　使用 JavaScript 创建可维护的幻灯片效果代码第1/3页

第一步：分析问题（Analizing the problem） 创建一个好的脚本，第一步应该是去分析哪些是你要完成的：我们想要创建一个照片的幻灯片效果，并且我们想要保持维护的方便。 如何创建一个幻灯片效果 在一个网站上拥有>>>详细阅读

本文标题：javascript table美化鼠标滑动单元格变色

地址：http://www.17bianji.com/kaifa2/JS/29618.html

 1/2    1