开发学院网页设计 JavaScript 用Javascript实现表格单元格背景色鼠标响应阅读

用Javascript实现表格单元格背景色鼠标响应

　2010-09-14 13:05:25　来源：WEB开发网　　　

核心提示：在FF中点击的效果会有些问题，当点击第一行单元格变色，用Javascript实现表格单元格背景色鼠标响应，点击第二个时第一个颜色不恢复原来无色的状态．<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt

在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>