Code<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>css-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>
<td class="tdstyle" height="25">第三行</td>
</tr>
<tr 16:15 2009-4-23>
<td class="tdstyle" height="25">第二行</td>
<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 height="25">第三行</td>
<td height="25">第三行</td>
</tr>
<tr class="light" onMouseOver="onColor(this,3);" onMouseOut="offColor(this,3);" onClick="onClickColor(this,3);">
<td height="25">第三行</td>
<td height="25">第三行</td>
</tr>
</table>
</body>
</html>
