[此文来源于互联网,牛C网只负责收集整理]

Table布局中单元格background-color鼠标响应的JS代码,效果如下:

表格布局中单元格背景颜色鼠标响应的JS代码

代码如下:

<!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>表格布局中单元格背景颜色鼠标响应的JS代码</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);">    <td class="tdstyle" height="25">第二行</td>  </tr>  <tr id="TR3" class="light" onMouseOver="onColor(this,3);" onMouseOut="offColor(this,3);" onClick="onClickColor(this,3);">    <td class="tdstyle" height="25">第三行</td>  </tr></table></body></html>

    

        

            


作者:gdgzboy@牛C网
地址:http://www.niuc.net/post/2684/
版权所有。转载时必须以链接形式注明作者和原始出处及本声明!



评论(0) | 引用(0) | 阅读(169)
发表评论
昵称 [注册]
密码 游客无需密码
网址
电邮
打开HTML 打开UBB 打开表情 隐藏 记住我