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

http://www.cnitblog.com/yemoo/archive/2006/06/28/13020.html

<! 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 >