怎样使选中一个单选按钮时，它所在的<td>区域变色呢？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD><BODY>
<TABLE>
<TR>
<TD id=tr1><INPUT TYPE="radio" NAME="r1" id="r1" onclick="setcolor('r1')"></TD>
<TD id=tr2><INPUT TYPE="radio" NAME="r1" id="r2"onclick="setcolor('r2')"></TD>
</TR>
<TR>
<TD id=tr3><INPUT TYPE="radio" NAME="r1" id="r3"onclick="setcolor('r3')"></TD>
<TD id=tr4><INPUT TYPE="radio" NAME="r1" id="r4"onclick="setcolor('r4')"></TD>
</TR>
 
</TABLE><SCRIPT LANGUAGE="JavaScript">
<!--
    function setcolor(rid){
   for(var i=1;i<5;i++){
    eval("tr"+i).bgColor='';
   }
   eval("t"+rid).bgColor='eaeaea';
}
//-->
</SCRIPT>
</BODY>
</HTML>

解决方案 »

  1.   

    <HTML>
    <HEAD>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    var curTd=null;
    function setcolor(){
    if(curTd)
    curTd.style.backgroundColor="#FFFFFF";
    var src=window.event.srcElement.parentElement;
        src.style.backgroundColor='eaeaea';
        curTd=src;
    }
    //-->
    </SCRIPT>
    </HEAD>
    <BODY>
    <TABLE>
    <TR>
    <TD><INPUT TYPE="radio" NAME="r1" id="r1" onclick="setcolor()"></TD>
    <TD><INPUT TYPE="radio" NAME="r1" id="r2" onclick="setcolor()"></TD>
    <TD><INPUT TYPE="radio" NAME="r1" id="r3" onclick="setcolor()"></TD>
    <TD><INPUT TYPE="radio" NAME="r1" id="r4" onclick="setcolor()"></TD>
    </TR>
    </TABLE>
    </BODY>
    </HTML>