点击背景变色

<HTML>   
  <HEAD>   
  <TITLE>   New   Document   </TITLE>   
  <style>   
  .a1   {   color:red ;background-color:#FFF; }   
  .a2   {   color:yellow;background-color:#CCC;}   
  </style>   
  <SCRIPT   LANGUAGE="JavaScript">   
  <!--   
  function   ChangeCSS(){   
    
  var   td   =   event.srcElement;   
  var   objtb   =   td.parentElement;   
  var   lenobjtb   =   objtb.childNodes.length;   
    
  for(i=0;i<lenobjtb;i++){   
  objtb.childNodes[i].className   =   "a1";   
  }   
    
  td.className   =   "a2";   
  }   
  //-->   
  </SCRIPT>   
  </HEAD>   
    
  <BODY>
  <table width="100%" border="0" cellspacing="0" cellpadding="0"   onclick="ChangeCSS()">
    <tr  class="a2">
      <td>11</td>
    </tr>
    <tr class="a1">
      <td>22</td>
    </tr>
    <tr  class="a1">
      <td>33</td>
    </tr>
    <tr class="a1">
      <td>44</td>
    </tr>
    <tr  class="a1">
      <td>55</td>
    </tr>
  </table>
  </BODY>   
  </HTML> 点击变灰色，但没点击中的没变白色，哪里错误了，怎么改请指教！！

解决方案 »

  1.   

    var   objtb   =   td.parentElement;得到的是<tr>
    对于其他行当然无效
      

  2.   

    <HTML>   
      <HEAD>   
      <TITLE>   New   Document   </TITLE>   
      <style>   
      .a1   {   color:red ;background-color:#FFF; }   
      .a2   {   color:yellow;background-color:#CCC;}   
      </style>   
      <SCRIPT   LANGUAGE="JavaScript">   
      <!--   
      function   ChangeCSS(){   
        
      var   td   =   event.srcElement;   
      var   objtb   =   td.parentElement;   
      var   lenobjtb   =   objtb.childNodes.length;   
        
      for(i=0;i<lenobjtb;i++){   
      objtb.childNodes[i].className   =   "a1";   
      }   
        
      td.className   =   "a2";   
      }   
      //-->   
      </SCRIPT>   
      </HEAD>   
        
      <BODY>
      <table width="100%" border="0" cellspacing="0" cellpadding="0"   onclick="ChangeCSS()">
        <tr>
          <td   class="a2">11111</td>   
              <td   class="a1">2222</td> 
              <td   class="a1">3333</td>  
              <td   class="a1">4444</td>   
              <td   class="a1">5555</td>
        </tr>
      </table>
      </BODY>   
      </HTML> 
      

  3.   

    document.getElementById("tr").style.backgroundcolor='';
      

  4.   

    <HTML>   
      <HEAD>   
      <TITLE>   New   Document   </TITLE>   
      <style>   
      .a1   {   color:red ;background-color:#FFF; }   
      .a2   {   color:yellow;background-color:#CCC;}   
      </style>   
      <SCRIPT   LANGUAGE="JavaScript">   
      <!--   
      function   ChangeCSS(){   
        
      var   td   =   event.srcElement;   
      var   objtb   =   td.parentElement.parentElement;   
      var   lenobjtb   =   objtb.childNodes.length;   
        
      for(i=0;i<lenobjtb;i++){   
      objtb.childNodes[i].className   =   "a1";   
      }   
        
      td.parentElement.className   =   "a2";   
      }   
      //-->   
      </SCRIPT>   
      </HEAD>   
        
      <BODY>
      <table width="100%" border="0" cellspacing="0" cellpadding="0"   onclick="ChangeCSS()">
        <tr  class="a2">
          <td>11</td>
        </tr>
        <tr class="a1">
          <td>22</td>
        </tr>
        <tr  class="a1">
          <td>33</td>
        </tr>
        <tr class="a1">
          <td>44</td>
        </tr>
        <tr  class="a1">
          <td>55</td>
        </tr>
      </table>
      </BODY>   
      </HTML>