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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<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> 
  <img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%20%0D%0A%20%20%20%20function%20addEvent(elm%2C%20evType%2C%20fn%2C%20useCapture)%7B%20%0D%0A%20%20%20%20%20%20%20%20if%20(elm.addEventListener)%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20elm.addEventListener(evType%2C%20fn%2C%20useCapture)%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20return%20true%3B%20%0D%0A%20%20%20%20%20%20%20%20%7D%20else%20if%20(elm.attachEvent)%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20r%20%3D%20elm.attachEvent(%22on%22%2BevType%2C%20fn)%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20return%20r%3B%20%0D%0A%20%20%20%20%20%20%20%20%7D%20else%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20alert(%22Handler%20could%20not%20be%20removed%22)%3B%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%7D%20%0D%0A%0D%0A%20%20%20%20function%20initTd()%7B%20%0D%0A%20%20%20%20%20%20%20%20var%20sections%3Ddocument.getElementsByTagName(%22td%22)%3B%20%0D%0A%20%20%20%20%20%20%20%20for(var%20i%3D0%3Bi%3Csections.length%3Bi%2B%2B)%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20section%3Dsections%5Bi%5D%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20if(section.getAttribute(%22t%22)%3D%3D%22yes%22)%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20section.className%3D%22class1%22%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20section.nextSibling.className%3D%22class3%22%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20addEvent(section%2C%22click%22%2CchangeTd)%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%7D%20%0D%0A%0D%0A%20%20%20%20function%20changeTd(ev)%7B%20%0D%0A%20%20%20%20%20%20%20%20var%20ev%3Dev%7C%7Cwindow.event%3B%20%0D%0A%20%20%20%20%20%20%20%20var%20evt%3Dev.srcElement%7C%7Cev.target%3B%20%0D%0A%20%20%20%20%20%20%20%20if(evt.tagName%3D%3D%22TD%22%26%26evt.getAttribute(%22t%22)%3D%3D%22yes%22)%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20sections%3Ddocument.getElementsByTagName(%22td%22)%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20for(var%20i%3D0%3Bi%3Csections.length%3Bi%2B%2B)%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20var%20section%3Dsections%5Bi%5D%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20if(section.getAttribute(%22t%22)%3D%3D%22yes%22)%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20section.className%3D%22class1%22%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20section.nextSibling.className%3D%22class3%22%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20evt.className%3D%22class2%22%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20evt.nextSibling.className%3D%22class4%22%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%7D%20%0D%0A%20%20%3C%2Fscript%3E"> 
</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> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%20%0D%0AinitTd()%3B%20%0D%0A%3C%2Fscript%3E"> 
</body> 
</html>

　　 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

教程首页更多教程