JavaScript 控制表格的行的颜色

2009-06-25 18:19:35 | 【

一个5行3列的表格,每一行第一列有一个复选框 当选中复选框时,该行变色(bgcolor="#CCCCCC"),取消选择时又恢复原来的颜色

查看全部代码 View Code

<script>

        /*****************************************************
         *  Share JavaScript (http://www.ShareJS.com)
         * 使用此脚本程序,请保留此声明
         * 获取此脚本以及更多的JavaScript程序,请访问 http://www.ShareJS.com
         ******************************************************/
    
function checkit(evt){
       var obj = window.event?event.srcElement:evt.target;
       obj.parentNode.parentNode.style.backgroundColor= obj.checked?'#CCC':'#FFF';
}
window.onload = function(){
   var ck = document.getElementsByName("checkbox");
   for(var i=0;i<ck.length;i++) ck[i].onclick = checkit;    
}
</script>
<table width="150" border="1" cellpadding="1" cellspacing="1">
  <tr>
    <td><input type="checkbox" name="checkbox" value="01"></td>
    <td>11</td>
    <td>12</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="checkbox" value="02"></td>
    <td>21</td>
    <td>22</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="checkbox" value="03"></td>
    <td>31</td>
    <td>32</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="checkbox" value="04"></td>
    <td>sharejs.com</td>
    <td>sharejs.com</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="checkbox" value="05"></td>
    <td>sharejs.com</td>
    <td>sharejs.com</td>
  </tr>
</table>

相关资源