Table布局中单元格background-color鼠标响应的JS代码

2020-06-14 22:45:41

字体：大中小

来源：转载

供稿：网友

　　上面的是此效果的效果图。
　　下面是实现此效果的代码：

代码调试框 [www.CuoXIn.com]

<!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>Table布局中单元格background-color鼠标响应的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>

[ 可先修改部分代码再运行查看效果 ]

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

上一篇：XHTML教程：如何去除链接虚线框？

下一篇：XHTML1.0Reference-XHTML1.0中允许使用的所有HTML元素列表！