JavaScript操作表格

时间：2007-07-17 来源：linxh

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <title></title>
  <style type="text/css">
    .class1{
      background:#efefef;

    }

    .class2{
      background: #ffffff;
    }

  </style>
  <script type="text/javascript">
    function addEvent(elm, evType, fn, useCapture){

     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"){


                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";

                    evt.className="class2";

                }
            }
        }
    }
  </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 t="yes" bgcolor="#efefef">b</td>
<td t="yes" bgcolor="#efefef">c</td>
<td t="yes" bgcolor="#efefef">c</td>
<td t="yes" bgcolor="#efefef">c</td>
<td t="yes" bgcolor="#efefef">c</td>
</tr>
</table>
<script type="text/javascript">
initTd();
</script>
</body>
</html>

<html>
<head>
<style>
.s {
   background-color: #efefef;
}
.d {
   background-color: red;
}
</style>
<script type="text/javascript">
function clickTd(td) {
   tr = td.parentNode;
   allTd = tr.childNodes;
   for (i = 0; i < allTd.length; i++) {
       allTd[i].className = "s";
   }
   td.className = "d";
}
</script>
</head>
<body>
<table>
<tr>
<td class="d" onclick="clickTd(this);">td1</td>
<td class="s" onclick="clickTd(this);">td2</td>
<td class="s" onclick="clickTd(this);">td3</td>
</tr>

</table>
</body>
</html>