[此文来源于互联网,牛C网只负责收集整理]
Table布局中单元格background-color鼠标响应的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/
版权所有。转载时必须以链接形式注明作者和原始出处及本声明!
牛C网推荐您再看看以下日志:
让FireFox支持innerText
javascript对象
美化H1标签
HTML表单标记教程(四) - <SELECT>标记
JavaScript教程 - 什么是JavaScript?
HTML表格标记教程(15) - 表格的标题
CSS 布局中ID class
用javascript实现(页面正在加载的效果)
JavaScript的9个陷阱及评点
HTML表格标记教程(32) - 单元格的水平对齐属性ALIGN
让FireFox支持innerText
javascript对象
美化H1标签
HTML表单标记教程(四) - <SELECT>标记
JavaScript教程 - 什么是JavaScript?
HTML表格标记教程(15) - 表格的标题
CSS 布局中ID class
用javascript实现(页面正在加载的效果)
JavaScript的9个陷阱及评点
HTML表格标记教程(32) - 单元格的水平对齐属性ALIGN
如何让无空格的长字符在IE和FF下面实现自动换行?
详细列举对一些HTML标签语义的理解





