表格的每一行的变色

表格的每一行前面都有一个checkBox 当选中时 这一行变色  
不选中时这一行不变色 多行选中  多行变色  全选 全变色  
我的一行是这样的 
                      <tr align="center" onMouseOver="this.className='tr_mouseOver'" 
                      onMouseOut="this.className='tr_odd'"> 
                      <label for="16585"> 
<td width="3%"> <input type="checkbox" name="idList" id="16585"value="16585"                                    onClick="selectOne(this.form)"> </td> 
<td align="left" width="25%">项目管理 </td> 
<td width="20%">comtop </td> 
<td width="9%">comtop </td> 
<td align="right" width="10%">1，000.00 </td> 
<td width="12%">2009-04-08 </td> 
<td width="12%">2009-05-08 </td> 
<td width="8%">活动项目 </td> 
</label> 
</tr>

解决方案 »

  1.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>test</title>
    <style language="text/css">
    /*第一种颜色*/
    #table tr.color1{
    background-color:#FFFFFF;
    }
    /*第二种颜色*/
    #table tr.color2{
    background-color:#F8F8F8;
    }
    </style>
    <script type="text/javascript">
    <!--
    function onloadEvent(func){
    var one=window.onload
    if(typeof window.onload!='function'){
      window.onload=func
    }
    else{
      window.onload=function(){
       one();
       func();
      }
    }
    }
    function showtable(){
    var tableid='table';  //表格的id
    var overcolor='#FCF9D8'; //鼠标经过颜色
    var color1='#FFFFFF';  //第一种颜色
    var color2='#F8F8F8';  //第二种颜色
    var tablename=document.getElementById(tableid)
    var tr=tablename.getElementsByTagName("tr")
    for(var i=1 ;i<tr.length;i++){
      tr.onmouseover=function(){
       this.style.backgroundColor=overcolor;
      }
      tr.onmouseout=function(){
       if(this.rowIndex%2==0){
        this.style.backgroundColor=color1;
       }else{
        this.style.backgroundColor=color2;
       }
      }
      if(i%2==0){
       tr.className="color1";
      }else{
       tr.className="color2";
      }
    }
    }
    onloadEvent(showtable);
    -->
    </script>
    </head>
    <body id="" class="">
    <table width="100%" border="0" cellspacing="1" cellpadding="4" class="list" name="table" id="table">
      <thead>
        <tr>
          <th>流程</th>
          <th>启动人</th>
          <th>启动时间</th>
          <th>状态</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><a href="">测试行</a></td>
          <td>无</td>
          <td>2008-05-09 17:21:04</td>
          <td>结束</td>
        </tr>
        <tr>
          <td><a href="">测试行</a></td>
          <td>无</td>
          <td>2008-05-09 17:21:04</td>
          <td>结束</td>
        </tr>
        <tr>
          <td><a href="">测试行</a></td>
          <td>无</td>
          <td>2008-05-09 17:21:04</td>
          <td>结束</td>
        </tr>
        <tr>
          <td><a href="">测试行</a></td>
          <td>无</td>
          <td>2008-05-09 17:21:04</td>
          <td>结束</td>
        </tr>
        <tr>
          <td><a href="">测试行</a></td>
          <td>无</td>
          <td>2008-05-09 17:21:04</td>
          <td>结束</td>
        </tr>
        <tr>
          <td><a href="">测试行</a></td>
          <td>无</td>
          <td>2008-05-09 17:21:04</td>
          <td>结束</td>
        </tr>
        <tr>
          <td><a href="">测试行</a></td>
          <td>无</td>
          <td>2008-05-09 17:21:04</td>
          <td>结束</td>
        </tr>
        <tr>
          <td><a href="">测试行</a></td>
          <td>无</td>
          <td>2008-05-09 17:21:04</td>
          <td>结束</td>
        </tr>
        <tr>
          <td><a href="">测试行</a></td>
          <td>无</td>
          <td>2008-05-09 17:21:04</td>
          <td>结束</td>
        </tr>
        <tr>
          <td><a href="">测试行</a></td>
          <td>无</td>
          <td>2008-05-09 17:21:04</td>
          <td>结束</td>
        </tr>
      </tbody>
    </table>
    </body>
    </html> 
      

  2.   


    <!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">
     <head>
      <title> new document </title>
      <meta name="generator" content="editplus" />
      <style type="text/css">
      table {
    width: 300px;
    height: 100px;
    border: 1px solid #C0C0C0;
    border-collapse: collapse;
    text-align: center;
    font-size: 9pt;
      }
      td {
    border: 1px solid #C0C0C0;
      }
      </style>
      <script type="text/javascript">
      <!--
    function showColor(e){
    var e = e || window.event;
    var oTarget = e.srcElement || e.target;
    var oTr = oTarget.parentNode.parentNode;
    if(oTarget.type == "checkbox"){
    oTarget.checked == true ? oTr.style.backgroundColor = "#808080" : oTr.style.backgroundColor = "#FFFFFF";
    }
    }
      //-->
      </script>
     </head> <body>
      <table onclick = "showColor(event);">
    <tr>
    <td>&nbsp;</td>
    <td>姓名</td>
    <td>性别</td>
    <td>年龄</td>
    </tr>
    <tr>
    <td><input type="checkbox" id="ochk" name="ochk" /></td>
    <td>Tom</td>
    <td>Men</td>
    <td>34</td>
    </tr>
    <tr>
    <td><input type="checkbox" id="ochk" name="ochk" /></td>
    <td>Jack</td>
    <td>Men</td>
    <td>23</td>
    </tr>
      </table>
     </body>
    </html>
      

  3.   


    <html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>新建网页 1</title>
    </head><body>
    <style>
    .tr_mouseOver{background:#808080}
    .tr_odd{background:#ffffff}
    </style>
    <table>
    <tr align="center" class=tr_odd onMouseOver="this.className='tr_mouseOver'" onMouseOut="this.className='tr_odd'"> 
    <label for="16585"> 
    <td width="3%"> <input type="checkbox" name="idList" id="16585"value="16585" onClick="selectOne(this)"> </td> 
    <td align="left" width="25%">项目管理 </td> 
    <td width="20%">comtop </td> 
    <td width="9%">comtop </td> 
    <td align="right" width="10%">1，000.00 </td> 
    <td width="12%">2009-04-08 </td> 
    <td width="12%">2009-05-08 </td> 
    <td width="8%">活动项目 </td> 
    </label> 
    </tr>
    <tr align="center" class=tr_odd onMouseOver="this.className='tr_mouseOver'" onMouseOut="this.className='tr_odd'"> 
    <label for="16586"> 
    <td width="3%"> <input type="checkbox" name="idList" id="16586"value="16586" onClick="selectOne(this)"> </td> 
    <td align="left" width="25%">项目管理 </td> 
    <td width="20%">comtop </td> 
    <td width="9%">comtop </td> 
    <td align="right" width="10%">1，000.00 </td> 
    <td width="12%">2009-04-08 </td> 
    <td width="12%">2009-05-08 </td> 
    <td width="8%">活动项目 </td> 
    </label> 
    </tr>
    <tr align="center" class=tr_odd onMouseOver="this.className='tr_mouseOver'" onMouseOut="this.className='tr_odd'"> 
    <label for="16587"> 
    <td width="3%"> <input type="checkbox" name="idList" id="16587"value="16587" onClick="selectOne(this)"> </td> 
    <td align="left" width="25%">项目管理 </td> 
    <td width="20%">comtop </td> 
    <td width="9%">comtop </td> 
    <td align="right" width="10%">1，000.00 </td> 
    <td width="12%">2009-04-08 </td> 
    <td width="12%">2009-05-08 </td> 
    <td width="8%">活动项目 </td> 
    </label> 
    </tr>
    </table><script language="javascript">
    <!--
    function selectOne(_this){
    var obj=_this.parentNode.parentNode.parentNode
    if (_this.checked){
    obj.className="tr_mouseOver"
    obj.onmouseover=obj.onmouseout=null
    }
    else{
    obj.className="tr_odd"
    obj.onmouseover=function(){this.className='tr_mouseOver'}
    obj.onmouseout=function(){this.className='tr_odd'}
    }
    }
    //-->
    </script>
    </body></html>