td点击背景变色特效（兼容ff/ie）

代码如下:

<! 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"  xml:lang ="en"  lang ="en" >

< head >
   < title ></ title >
   < style  type ="text/css" >
    .class1 {
      background : #efefef ;
      text-align : center ;
      width : 80px ;
     }
    .class2 {
      background :  #ffcc00 ;
      text-align : center ;
      width :  80px ;
     }
    .class3 {
      background :  #ffffff ;
     }
    .class4 {
      background :  #ffff00 ;
     }
   </ style >
   < script  type ="text/javascript" >
     function  addEvent(elm, evType, fn, useCapture){
         if  (elm.addEventListener){
            elm.addEventListener(evType, fn, useCapture);
             return   true ;
        }  else   if  (elm.attachEvent){
             var  r  =  elm.attachEvent( " on " + evType, fn);
             return  r;
        }  else  {
            alert( " Handler could not be removed " );
        }
    }

     function  initTd(){
         var  sections = document.getElementsByTagName( " td " );
         for ( var  i = 0 ;i < sections.length;i ++ ){
             var  section = sections[i];
             if (section.getAttribute( " t " ) == " yes " ){
                section.className = " class1 " ;
                section.nextSibling.className = " class3 " ;
                addEvent(section, " click " ,changeTd);
            }
        }
    }

     function  changeTd(ev){
         var  ev = ev || window.event;
         var  evt = ev.srcElement || ev.target;
         if (evt.tagName == " TD " && evt.getAttribute( " t " ) == " yes " ){
             var  sections = document.getElementsByTagName( " td " );
             for ( var  i = 0 ;i < sections.length;i ++ ){
                 var  section = sections[i];
                 if (section.getAttribute( " t " ) == " yes " ){
                    section.className = " class1 " ;
                    section.nextSibling.className = " class3 " ;
                    evt.className = " class2 " ;
                    evt.nextSibling.className = " class4 " ;
                }
            }
        }
    }
   </ script >
</ head >
< body >
< table  cellpadding ="0"  cellspacing ="0"  border ="1"  bordercolor ="#cccccc"  style ="border-collapse:collapse"  align ="center"  width ="300" >
< tr >< td  t ="yes" > a </ td >< td > this is section a </ td ></ tr >
< tr >< td  t ="yes" > b </ td >< td > this is section b </ td ></ tr >
< tr >< td  t ="yes" > c </ td >< td > this is section c </ td ></ tr >
< tr >< td  t ="yes" > d </ td >< td > this is section d </ td ></ tr >
</ table >
< script  type ="text/javascript" >
initTd();
</ script >
</ body >
</ html >