怎么点击单元格子颜色动态改变？

<html>
<head>
<style type="text/css">
td{background-color:#fcf;}
</style>
</head>
<body>
<table >
<tbody id="menu">
<tr><td>111</td><td>111</td><td>111</td><td>111</td></tr>
<tr><td>111</td><td>111</td><td>111</td><td>111</td></tr>
</tbody>
</table>
</body>
</html>
<script>
var chek;
var oTbd=document.getElementById("menu");
var oTr=oTbd.rows;
for(var i=0;i<oTr.length;i++){
for(var j=0;j<oTr[i].cells.length;j++){
oTr[i].cells[j].onclick=function(){if(chek){chek.style.backgroundColor="#fcf";}
this.style.backgroundColor="#cfc";
chek=this;}
}
}
</script>
大概这效果吧?

解决方案 »

  1.   

    写个
    <html> 
    <head> 
    <script>
    function changColor(){
    var obj = event.srcElement;
    obj.style.backgroundColor = 'red';
    }
    </script>
    </head> 
    <body> 
    <table onclick="changColor()"> 
    <tr> <td>111 </td> <td>111 </td> <td>111 </td> <td>111 </td> </tr> 
    <tr> <td>111 </td> <td>111 </td> <td>111 </td> <td>111 </td> </tr> 
    </table> 
    </body> 
    </html> 
      

  2.   

    <html> 
    <head> 
    <style type="text/css"> 
    td{background-color:#fcf;} 
    </style> 
    </head> 
    <body> 
    <table > 
    <tbody id="menu"> 
    <tr> <td>111 </td> <td>111 </td> <td>111 </td> <td>111 </td> </tr> 
    <tr> <td>111 </td> <td>111 </td> <td>111 </td> <td>111 </td> </tr> 
    </tbody> 
    </table> 
    </body> 
    </html> 
    <script> 
    var chek; 
    var oTbd=document.getElementById("menu"); 
    var oTr=oTbd.rows; 
    for(var i=0;i <oTr.length;i++){ 
    for(var j=0;j <oTr[i].cells.length;j++){ 
    oTr[i].cells[j].onclick=function(){if(chek){chek.style.backgroundColor="#fcf";} 
    this.style.backgroundColor="#cfc"; 
    chek=this;} 
    } 
    } 
    </script>