IT技术江湖   操作系统   安全技术   平面设计   Web开发   数据库   互联网   搜索引擎   网络广告   
引擎技术江湖  BLOG  合作联系
本站
Google
IT技术江湖
首页>Web开发>JavaScript特效> 用Javascript实现表格单元格背景色鼠标响应
  • IT技术江湖
  • 用Javascript实现表格单元格背景色鼠标响应
    http://www.hack1st.com 来源: 2008-06-19 阅读: 评论

     在FF中点击的效果会有些问题,当点击第一行单元格变色,点击第二个时第一个颜色不恢复原来无色的状态.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="
    http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>单元格背景色鼠标响应</title>
    <script language="javascript">
    <!--
    var aTDClick=new Array(3);
    function onColor(td,n)
    {
      if(!aTDClick[n-1]){
            td.style.backgroundColor='#FFFF99';
          td.style.color='#0600FF';
        }else{
            td.style.backgroundColor='#FF6699';
          td.style.color='#0600FF';
        }
    }
    function onClickColor(td,n)
    {
        switch(n)
        {
            case 1:
                if(aTDClick[0]!==true){
                    td.style.backgroundColor='#FF6699';
                  td.style.color='#0600FF';
                    aTDClick[0]=true;
                }else{
                    TR1.style.backgroundColor='';
                  TR1.style.color='';
                    aTDClick[0]=false;
                }
                TR2.style.backgroundColor='';
                TR2.style.color='';
                TR3.style.backgroundColor='';
                TR3.style.color='';
                aTDClick[1]=false;
                aTDClick[2]=false;
                break;
            case 2:
                if(aTDClick[1]!==true){
                    td.style.backgroundColor='#FF6699';
                  td.style.color='#0600FF';
                    aTDClick[1]=true;
                }else{
                    TR2.style.backgroundColor='';
                  TR2.style.color='';
                    aTDClick[1]=false;
                }
                TR1.style.backgroundColor='';
                TR1.style.color='';
                TR3.style.backgroundColor='';
                TR3.style.color='';
                aTDClick[0]=false;
                aTDClick[2]=false;
                break;
            case 3:
                if(aTDClick[2]!==true){
                    td.style.backgroundColor='#FF6699';
                  td.style.color='#0600FF';
                    aTDClick[2]=true;
                }else{
                    TR3.style.backgroundColor='';
                  TR3.style.color='';
                    aTDClick[2]=false;
                }
                TR2.style.backgroundColor='';
                TR2.style.color='';
                TR1.style.backgroundColor='';
                TR1.style.color='';
                aTDClick[1]=false;
                aTDClick[0]=false;
                break;
        }
    }
    function offColor(td,n)
    {
      if(!aTDClick[n-1]){
            td.style.backgroundColor='';
          td.style.color='';
        }else{
            td.style.backgroundColor='#FF6699';
          td.style.color='#0600FF';
        }
    }
    -->
    </script>
    <style type="text/css">
    <!--
    .light {
        font: normal 9pt "宋体";
        color: #000000;
        text-decoration: none;
        background: #FFFFFF;
        cursor: default;
    }
    .tdstyle {
        border: 1px dashed #0099CC;
    }
    -->
    </style>
    </head>
    <body>
    <table width="100%" border="0" cellspacing="4" cellpadding="0">
     <tr id="TR1" class="light" onMouseOver="onColor(this,1);" onMouseOut="offColor(this,1);" onClick="onClickColor(this,1);">
      <td class="tdstyle" height="25">第一行</td>
     </tr>
     <tr id="TR2" class="light" onMouseOver="onColor(this,2);" onMouseOut="offColor(this,2);" onClick="onClickColor(this,2);">

    上一页12 下一页

    上一篇:编程实例 一个简单的智能感知效果  
    下一篇:没有了

    ·网友互动--用户名: (新注册) 密码: 匿名评论 [所有评论]
    评论内容:(用户发表意见仅代表其个人意见,评论内容与本站立场无关,请自觉遵守互联网相关政策法规)
    关注此文读者还看过
    • ·用Javascript实现表格单元格背景色鼠标响应
      ·编程实例 一个简单的智能感知效果
      ·排序Select中Option项的一个示例
      ·JavaScript技巧:让网页自动穿上外套
      ·用JavaScript/JS制作仿“QQ秀”的虚拟形象
      ·防止查看源代码的网页特效
      ·循环不间断向上滚动的文本特效代码
      ·鼠标单击连接在网页中弹出个性提示小窗口
      ·Javascript强制设为首页的网页代码
      ·网页表单禁止输入某些符号的简单实现方法
    最新更新
    • ·用Javascript实现表格单元格背景色鼠标响应
      ·编程实例 一个简单的智能感知效果
      ·排序Select中Option项的一个示例
      ·JavaScript技巧:让网页自动穿上外套
      ·用JavaScript/JS制作仿“QQ秀”的虚拟形象
      ·防止查看源代码的网页特效
      ·循环不间断向上滚动的文本特效代码
      ·鼠标单击连接在网页中弹出个性提示小窗口
      ·Javascript强制设为首页的网页代码
      ·网页表单禁止输入某些符号的简单实现方法
    文章关注度排行
    ·鼠标单击连接在网页中弹出个性提示小窗口
    ·用JavaScript/JS制作仿“QQ秀”的虚拟形象
    ·特效代码:非常漂亮的鼠标提示的信息
    ·Javascript强制设为首页的网页代码
    ·排序Select中Option项的一个示例
    ·循环不间断向上滚动的文本特效代码
    ·用JavaScript刷新框架子页面的方法
    ·在IE浏览器中正确显示PNG透明图片
    热点推荐
    特效代码:非常漂亮的鼠标提示的信息
    特效代码:非常漂亮的鼠
    距离北京2008年奥运会开幕的倒记时特效
    距离北京2008年奥运会开
    频道推荐
    • ·鼠标单击连接在网页中弹出个性提示小窗口
    • ·特效代码:非常漂亮的鼠标提示的信息
    • ·Javascript强制设为首页的网页代码
    • ·循环不间断向上滚动的文本特效代码
    • ·网页表单禁止输入某些符号的简单实现方法
    • ·防止查看源代码的网页特效
    • ·距离北京2008年奥运会开幕的倒记时特效
    • ·推荐几个入门级的JS特效代码
    本站精华
    特效代码:非常漂亮的鼠标提示的信息
    特效代码:非
    距离北京2008年奥运会开幕的倒记时特效
    距离北京2008
    • ·防止查看源代码的网页特效
    • ·循环不间断向上滚动的文本特效
    • ·鼠标单击连接在网页中弹出个性
    • ·Javascript强制设为首页的网页
    • ·网页表单禁止输入某些符号的简
    • ·距离北京2008年奥运会开幕的倒
    • | 网站导航 | 联系QQ | 编辑邮箱 | RSS订阅 | 友情链接 | 官方blog
    • 版权所有:IT技术江湖 @2007-2008
    • powered by www.hack1st.com online services. all rights reserved.京ICP备07005766号