今天是:
您现在的位置： 韩国设计资源网 >> 设计师学院 >> 网页设计 >> Javascript >> 教程正文
用JS实现表格单元格背景色的鼠标响应的特效。
在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);"> <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>
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
