td点击背景变色特效（兼容ff/ie） _移动端td点击背景-优快云博客

代码如下:

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