编辑CSS样式表时总结下FF与IE的区别
网页制作实用技巧-用图片代替提交和重置按钮
[此文来源于互联网，牛C网只负责收集整理]
用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>
作者：gdgzboy@牛C网
地址：http://www.niuc.net/post/2690/
版权所有。转载时必须以链接形式注明作者和原始出处及本声明！
牛C网推荐您再看看以下日志：
HTML表格标记教程(27) - 单元格的背景图像属性BACKGROUND
用javascript实现select的美化
解决网页木马
JavaScript教程 - 常用对象的属性和方法
XSL学习教程-运算符和函数
CSS 和 HTML 层图示
CSS 教程 - 计算CSS盒模型宽和高
两种网页声明的含义
CSS的利与弊（下）
如何用javascript判断录入的日期是否合法
HTML表格标记教程(27) - 单元格的背景图像属性BACKGROUND
用javascript实现select的美化
解决网页木马
JavaScript教程 - 常用对象的属性和方法
XSL学习教程-运算符和函数
CSS 和 HTML 层图示
CSS 教程 - 计算CSS盒模型宽和高
两种网页声明的含义
CSS的利与弊（下）
如何用javascript判断录入的日期是否合法
