请高手帮我修改一下网页效果

以下是原代码.
可以实现点击aaa行时
aaa复选框自动选中,aaa行表格变黄色,bbb行所有不变点击bbb行时
bbb复选框自动选中,bbb行表格变黄色,aaa行还是黄色
(也即是用黄色可以显示多行)现在我想点击aaa,bbb行的时候复选框不选中,
点击aaa行变黄色,bbb行白色,点击bbb行的时候bbb行变黄色,aaa行是白色
(也即是用黄色只显示一行)
代码该如何改?<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>dhtml.table.changeTrBgColor.html</title></head><body>
    <h3>&nbsp;</h3>
    <table width="896" height="61" border="1" cellpadding="0" cellspacing="0">
    <tr>
        <td width="280">
            <input type="checkbox" name="cbxGroup" value="checkbox" />
            <label>aaa</label></td>
        <td width="304">&nbsp;</td>
        <td width="304">&nbsp;</td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" name="cbxGroup" value="checkbox" />
            <label>bbb</label></td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
</table>
    <br />
</body>
<script type="text/javascript">
<!--var aCbx = document.getElementsByName("cbxGroup");
var oTr;
for (var i=0; i<aCbx.length; i++)
{
    oTr = aCbx[i].parentNode.parentNode;    // 鼠标经过表格,表格变红色,鼠标离开,表格白色. 
    oTr.onmouseover = function()
    {        this.style.backgroundColor = "pink";
    };
    oTr.onmouseout = function()
    {
        this.style.backgroundColor = "white";
    };    // 鼠标点击表格，复选框选中，表格变蓝色。
    // 鼠标离开后，表格还是蓝色。再次点击表格，复选框不选中，表格变为鼠标经过时的红色。
    oTr.checkBox = aCbx[i];
    oTr.onclick = function()
    {
        with (this)
        {
            checkBox.checked = !checkBox.checked;            if (checkBox.checked)
            {
                style.backgroundColor = "yellow";
                fpMouseover = onmouseover;
                onmouseover = null;
                fpMouseout = onmouseout;
                onmouseout = null;                        
            }
            else
            {
                style.backgroundColor = "pink";
                onmouseover = fpMouseover;
                onmouseout = fpMouseout;                        
            }
        }
    };    aCbx[i].onclick = function()
    {        this.checked = !this.checked;
    };
}
//-->
</script>
</html>

解决方案 »

  1.   

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
         <title>dhtml.table.changeTrBgColor.html </title></head><body>
         <h3>&nbsp; </h3>
         <table width="896" height="61" border="1" cellpadding="0" cellspacing="0">
         <tr>
             <td width="280">
                 <input type="checkbox" name="cbxGroup" value="checkbox" />
                 <label>aaa </label>
                 1</td>
             <td width="304">&nbsp; </td>
             <td width="304">&nbsp; </td>
         </tr>
         <tr>
             <td>
                 <input type="checkbox" name="cbxGroup" value="checkbox" />
                 <label>bbb </label> 
                 2</td>
             <td>&nbsp; </td>
             <td>&nbsp; </td>
         </tr>
         <tr>
             <td width="280">
                 <input type="checkbox" name="cbxGroup" value="checkbox" />
                 <label>aaa </label> 
                 3</td>
             <td width="304">&nbsp; </td>
             <td width="304">&nbsp; </td>
         </tr>
         <tr>
             <td>
                 <input type="checkbox" name="cbxGroup" value="checkbox" />
                 <label>bbb </label> 
                 4</td>
             <td>&nbsp; </td>
             <td>&nbsp; </td>
         </tr>
         <tr>
             <td width="280">
                 <input type="checkbox" name="cbxGroup" value="checkbox" />
                 <label>aaa </label> 
                 5</td>
             <td width="304">&nbsp; </td>
             <td width="304">&nbsp; </td>
         </tr>
         <tr>
             <td>
                 <input type="checkbox" name="cbxGroup" value="checkbox" />
                 <label>bbb </label> 
                 6</td>
             <td>&nbsp; </td>
             <td>&nbsp; </td>
         </tr>
    </table>
         <br />
    </body>
    <script type="text/javascript">
    <!--var aCbx = document.getElementsByName("cbxGroup");
    var oTr;
    for (var i=0; i <aCbx.length; i++){
        oTr = aCbx[i].parentNode.parentNode;    // 鼠标经过表格,表格变红色,鼠标离开,表格白色. 
        oTr.onmouseover = function(){
            this.style.backgroundColor = "pink";
        };
        oTr.onmouseout = function(){
            this.style.backgroundColor = "white";
        };
    oTr.fpMouseover=oTr.onmouseover;
    oTr.fpMouseout=oTr.onmouseout;

        // 鼠标点击表格，复选框选中，表格变蓝色。
        // 鼠标离开后，表格还是蓝色。再次点击表格，复选框不选中，表格变为鼠标经过时的红色。
        oTr.checkBox = aCbx[i];
        oTr.onclick = function(){

    //将触本行外所有选中项清除选中
    var oTrs=this.parentNode.rows;
    for(var i=0,nLen=oTrs.length;i<nLen;i++){
    if(oTrs[i]!=this){
    oTrs[i].checkBox.checked=false;
    oTrs[i].style.backgroundColor="white";
    oTrs[i].onmouseover = oTrs[i].fpMouseover;
    oTrs[i].onmouseout = oTrs[i].fpMouseout;
    }
    }

        with (this){
                checkBox.checked = !checkBox.checked;
    if (checkBox.checked){
                    style.backgroundColor = "yellow";
                    fpMouseover = onmouseover;
                    onmouseover = null;
                    fpMouseout = onmouseout;
                    onmouseout = null;                        
                }
                else{
                    style.backgroundColor = "pink";
                    onmouseover = fpMouseover;
                    onmouseout = fpMouseout;                        
                }
            }
        };    aCbx[i].onclick = function(){
            this.checked = !this.checked;
        };
    }
    //-->
    </script>
    </html>
      

  2.   

    谢谢xingqiliudehuanghun你的修改基本上符合要求,但如果我不想复选框选中就有这个效果怎么办呀?
    就是行选中后复选框不选中.
      

  3.   

    我这样改了一下,倒是可以实现我要的功能,但还有个小问题,就是选中过的行,鼠标再次经过的时候不再变色了,不知道是为什么.<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
          <title>dhtml.table.changeTrBgColor.html  </title> </head> <body> 
          <h3>&nbsp;  </h3> 
          <table width="896" height="61" border="1" cellpadding="0" cellspacing="0"> 
          <tr> 
              <td width="280"> 
                  <input type="checkbox" name="cbxGroup" value="checkbox" /> 
                  <label>aaa  </label> 
                 1 </td> 
              <td width="304">&nbsp;  </td> 
              <td width="304">&nbsp;  </td> 
          </tr> 
          <tr> 
              <td> 
                  <input type="checkbox" name="cbxGroup" value="checkbox" /> 
                  <label>bbb  </label>  
                 2 </td> 
              <td>&nbsp;  </td> 
              <td>&nbsp;  </td> 
          </tr> 
          <tr> 
              <td width="280"> 
                  <input type="checkbox" name="cbxGroup" value="checkbox" /> 
                  <label>aaa  </label>  
                 3 </td> 
              <td width="304">&nbsp;  </td> 
              <td width="304">&nbsp;  </td> 
          </tr> 
          <tr> 
              <td> 
                  <input type="checkbox" name="cbxGroup" value="checkbox" /> 
                  <label>bbb  </label>  
                 4 </td> 
              <td>&nbsp;  </td> 
              <td>&nbsp;  </td> 
          </tr> 
          <tr> 
              <td width="280"> 
                  <input type="checkbox" name="cbxGroup" value="checkbox" /> 
                  <label>aaa  </label>  
                 5 </td> 
              <td width="304">&nbsp;  </td> 
              <td width="304">&nbsp;  </td> 
          </tr> 
          <tr> 
              <td> 
                  <input type="checkbox" name="cbxGroup" value="checkbox" /> 
                  <label>bbb  </label>  
                 6 </td> 
              <td>&nbsp;  </td> 
              <td>&nbsp;  </td> 
          </tr> 
    </table> 
          <br /> 
    </body> 
    <script type="text/javascript">
    <!--var aCbx = document.getElementsByName("cbxGroup");
    var oTr;
    var oTrselect;
    for (var i=0; i<aCbx.length; i++)
    {
        oTr = aCbx[i].parentNode.parentNode;    // 鼠标经过表格,表格变红色,鼠标离开,表格白色. 
        oTr.onmouseover = function()
        {
            this.style.backgroundColor = "E8F9FF";
        };
        oTr.onmouseout = function()
        {
            this.style.backgroundColor = "white";
        };    // 鼠标点击表格，复选框选中，表格变蓝色。
        // 鼠标离开后，表格还是蓝色。再次点击表格，复选框不选中，表格变为鼠标经过时的红色。
        oTr.checkBox = aCbx[i];
        oTr.onclick = function()
        {
         var oTrs=this.parentNode.rows; 
         for(var i=0,nLen=oTrs.length;i <nLen;i++){ 
         if(oTrs[i]!=this){      oTrs[i].style.backgroundColor="white";      } 
         } 
            with (this)
            {                style.backgroundColor = "#FFFDD7";
                    fpMouseover = onmouseover;
                    onmouseover = null;
                    fpMouseout = onmouseout;
                    onmouseout = null;   
        
            }    };
    }
    //-->
    </script>
    </html>