欢迎来到福编程网，本站提供各种互联网专业知识！

手机版

微信关注

快捷导航: 正则表达式 AJAX相关黑客相关相关技巧 Mysql MsSql MsSql2005 MsSql2008 MariaDB Oracle Access SQLite PostgreSQL MongoDB DB2 Redis 数据库文摘数据库其它 LINUX RedHat/Centos Ubuntu/Debian Fedora Solaris 红旗Linux Unix/BSD 苹果MAC 麒麟系统注册表 BIOS 系统安装系统进程 Fireworks教程

广告商业广告，理性选择

您的位置：网站首页 > 网络编程 > JavaScript > javascript技巧

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

发布时间：2008-06-10　作者：　来源：转载

标签：雪佛兰通用奢华劳斯莱斯旗舰版 64位收藏夹解调器

效果非常不错的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>

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 
</head> 
<body>

<p style="TEXT-INDENT: 2em">Final example with JavaScript applied.  Hover over a table cell to see effects.  "View Source" and copy if you'd like to use.</p>

<thead> 
         
            <th class="null"> </th> 
            <th class="stones">Rolling Stones</th> 
            <th class="u2">U2</th> 
            <th class="crue">Mötley Crüe</th> 
         
    </thead> 
     
         
            <th>Lead Vocals</th> 
            Mick Jagger 
            Bono 
            Vince Neil 
         
         
            <th>Lead Guitar</th> 
            Keith Richards 
            The Edge 
            Mick Mars 
         
         
            <th>Bass Guitar</th> 
            Ron Wood 
            Adam Clayton 
            Nikkie Sixx 
         
         
            <th>Drums</th> 
            Charlie Watts 
            Larry Mullen, Jr. 
            Tommy Lee

</body>

</html>

本篇文章来源于 cssrain.cn 原文链接：http://www.cssrain.cn/article.asp?id=20

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

上一篇：asp.net和asp下ACCESS的参数化查询

下一篇：javascript 网站常用的iframe分割

广告商业广告，理性选择

网站首页

网络编程

数据库

操作系统

平面设计

网站运营

网络安全

电脑相关

手机学院

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

相关推荐

文章分类

热门关键词

热门文章

最新更新