改好了<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>table</TITLE>
<STYLE>
table
{
border-top:1px solid black;
border-left:1px solid black;
cursor:default;
}
td
{
border-bottom:1px solid black;
border-right:1px solid black;
height:23px;
}
</STYLE>
<SCRIPT language="javascript">
function change()
{
var oObj = event.srcElement;

if(oObj.tagName.toLowerCase() == "td")
{
var oTr = oObj.parentNode;
oTr.style.backgroundColor =(oTr.style.backgroundColor.toLowerCase()=="#ccccff")?"":"#CCCCFF";
oTr.tag =(oTr.tag==true)?false:true;

}
}function out()
{
var oObj = event.srcElement;
if(oObj.tagName.toLowerCase() == "td")
{
var oTr = oObj.parentNode;
if(!oTr.tag)
oTr.style.backgroundColor = "";
}
}function over()
{
var oObj = event.srcElement;
if(oObj.tagName.toLowerCase() == "td")
{
var oTr = oObj.parentNode;
if(!oTr.tag)
oTr.style.backgroundColor = "#E1E9FD";
}
}</SCRIPT>
</HEAD><BODY>
<TABLE id="table1" width="50%" border="0" cellpadding="0" cellspacing="0">
  <TR style="background-color:#999999; border-bottom:2px solid black; height:25px" align="center">
    <TD width="25%">one</TD>
    <TD width="25%">two</TD>
    <TD width="25%">three</TD>
    <TD width="25%">four</TD>
  </TR>
  <TR onMouseOver="over()" onClick="change()" onMouseOut="out()">
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
  </TR>
  <TR onMouseOver="over()" onClick="change()" onMouseOut="out()">
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
  </TR>
  <TR onMouseOver="over()" onClick="change()" onMouseOut="out()">
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
  </TR>
  <TR onMouseOver="over()" onClick="change()" onMouseOut="out()">
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
  </TR>
  <TR onMouseOver="over()" onClick="change()" onMouseOut="out()">
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
  </TR>
  <TR onMouseOver="over()" onClick="change()" onMouseOut="out()">
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
  </TR>
  <TR onMouseOver="over()" onClick="change()" onMouseOut="out()">
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
  </TR>      
</TABLE>
</BODY>
</HTML>

解决方案 »

  1.   

    <HTML>
    <HEAD>
    <META http-equiv="Content-Type" content="text/html; charset=gb2312">
    <TITLE>table</TITLE>
    <STYLE>
    table
    {
    border-top:1px solid black;
    border-left:1px solid black;
    cursor:default;
    }
    td
    {
    border-bottom:1px solid black;
    border-right:1px solid black;
    height:23px;
    }
    </STYLE>
    <SCRIPT language="javascript">
    function change(el)
    {
    var x = el.rowIndex;
    el.style.backgroundColor = ++d[x]%2 ? "#CCCCFF" : "#E1E9FD";
    }function out(el)
    {
    var x = el.rowIndex;
    if (d[x]%2==0) el.style.backgroundColor = "";
    }function over(el)
    {
    var x = el.rowIndex;
    if (d[x]%2==0) el.style.backgroundColor = "#E1E9FD";
    }</SCRIPT>
    </HEAD><BODY>
    <TABLE id="table1" width="50%" border="0" cellpadding="0" cellspacing="0">
      <TR style="background-color:#999999; border-bottom:2px solid black; height:25px" align="center">
        <TD width="25%">one</TD>
        <TD width="25%">two</TD>
        <TD width="25%">three</TD>
        <TD width="25%">four</TD>
      </TR>
      <TR onMouseOver="over(this)" onClick="change(this)" onMouseOut="out(this)">
        <TD>&nbsp;</TD>
        <TD>&nbsp;</TD>
        <TD>&nbsp;</TD>
        <TD>&nbsp;</TD>
      </TR>
      <TR onMouseOver="over(this)" onClick="change(this)" onMouseOut="out(this)">
        <TD>&nbsp;</TD>
        <TD>&nbsp;</TD>
        <TD>&nbsp;</TD>
        <TD>&nbsp;</TD>
      </TR>
      <TR onMouseOver="over(this)" onClick="change(this)" onMouseOut="out(this)">
        <TD>&nbsp;</TD>
        <TD>&nbsp;</TD>
        <TD>&nbsp;</TD>
        <TD>&nbsp;</TD>
      </TR>
      <TR onMouseOver="over(this)" onClick="change(this)" onMouseOut="out(this)">
        <TD>&nbsp;</TD>
        <TD>&nbsp;</TD>
        <TD>&nbsp;</TD>
        <TD>&nbsp;</TD>
      </TR>
      <TR onMouseOver="over(this)" onClick="change(this)" onMouseOut="out(this)">
        <TD>&nbsp;</TD>
        <TD>&nbsp;</TD>
        <TD>&nbsp;</TD>
        <TD>&nbsp;</TD>
      </TR>
      <TR onMouseOver="over(this)" onClick="change(this)" onMouseOut="out(this)">
        <TD>&nbsp;</TD>
        <TD>&nbsp;</TD>
        <TD>&nbsp;</TD>
        <TD>&nbsp;</TD>
      </TR>
      <TR onMouseOver="over(this)" onClick="change(this)" onMouseOut="out(this)">
        <TD>&nbsp;</TD>
        <TD>&nbsp;</TD>
        <TD>&nbsp;</TD>
        <TD>&nbsp;</TD>
      </TR>      
    </TABLE>
    <script>var d = new Array(document.getElementById("table1").rows.length);for(i=0;i<d.length;i++)d[i]=0</script>
    </BODY>
    </HTML>