我想实现些网页效果,请高手指教

代码如下:
<table width="590" height="61" border="1" cellpadding="0" cellspacing="0">
  <tr>
    <td width="280"><label>
      <input type="checkbox" name="checkbox" value="checkbox" />
    aaa</label></td>
    <td width="304">&nbsp;</td>
  </tr>
  <tr>
    <td><input name="checkbox" type="checkbox" id="checkbox" value="checkbox" />
      bbb</td>
    <td>&nbsp;</td>
  </tr>
</table>我要的效果是:
1、鼠标经过表格,表格变红色,鼠标离开,表格白色.
2、鼠标点击表格，复选框选中，表格变蓝色。鼠标离开后，表格还是蓝色。再次点击表格，复选框不选中，表格变为鼠标经过时的红色。

解决方案 »

  1.   

    ls说啥？哪里还有？俺只看到这个！L@_@K
    <!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" />
        <meta name="author" content="Gao YiXiang" />
        <meta name="email" content="[email protected]" />
        <meta name="keywords" content="javascript dhtml dom" />
        <meta name="description" content="I love web development." />
    </head>
    <body>
        <table id="tbeTest" width="590" height="61" border="1" cellpadding="0" cellspacing="0">
        <tr>
            <td width="280">
                <input type="checkbox" name="cbxGroup" id="cbx1" value="checkbox" />
                <label for="cbx1">aaa</label></td>
            <td width="304">&nbsp;</td>
        </tr>
        <tr>
            <td>
                <input name="cbxGroup" type="checkbox" id="cbx2" value="checkbox" />
                <label for="cbx2">bbb</label></td>
            <td>&nbsp;</td>
        </tr>
    </table>
    </body>
    <script type="text/javascript">
    <!--
    function changeTrBgColor(sColor)
    {
        
    }
    // 鼠标经过表格,表格变红色,鼠标离开,表格白色. 
    var oTbe = document.getElementById("tbeTest");
    for (var i=0; i<oTbe.cells.length; i++)
    {
        with (oTbe.cells[i])
        {
            onmouseover = function()
            {
                this.parentNode.style.backgroundColor = "red";
            };
            onmouseout = function()
            {
                this.parentNode.style.backgroundColor = "white";
            };
        }
    }// 鼠标点击表格，复选框选中，表格变蓝色。
    // 鼠标离开后，表格还是蓝色。再次点击表格，复选框不选中，表格变为鼠标经过时的红色。
    var aCbx = document.getElementsByName("cbxGroup");
    for (var i=0; i<aCbx.length; i++)
    {
        with (aCbx[i])
        {
            onclick = function()
            {
                if (this.checked)
                {
                    with (this.parentNode)
                    {
                        parentNode.style.backgroundColor = "blue";
                        fpMouseover = onmouseover;
                        onmouseover = null;
                        fpMouseout = onmouseout;
                        onmouseout = null;
                    }
                }
                else
                {
                    with (this.parentNode)
                    {
                        parentNode.style.backgroundColor = "red";
                        onmouseover = fpMouseover;
                        onmouseout = fpMouseout;
                    }
                }
            };
        }
    }
    //-->
    </script>
    </html>
      

  2.   

    http://topic.csdn.net/u/20080127/22/e9c97f34-3f6d-4962-aebf-a7ed7e1ec5e4.html
      

  3.   

    yixianggao   ,你好,我点击表格时,复选框没选中.一定要点击复选框才行,有什么办法解决?
      

  4.   

    LZ，其实tantaiyizu 在另外一个帖已经给你答案了
      

  5.   

    晕，早说点行变色呀！L@_@K
    <!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>dhtml.table.changeTrBgColor.html</title>
        <meta name="generator" content="editplus" />
        <meta name="author" content="Gao YiXiang" />
        <meta name="email" content="[email protected]" />
        <meta name="keywords" content="javascript dhtml dom" />
        <meta name="description" content="I love web development." />
    </head>
    <body>
        <h3>选中行变色！注：IE6ps1, FF2 测试可用！</h3>
        <table width="590" 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>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="cbxGroup" value="checkbox" />
                <label>bbb</label></td>
            <td>&nbsp;</td>
        </tr>
    </table>
    </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>
      

  6.   

    yixianggao ,你好,你上面的程序完全符合要求.如果我想再加一个条件呢?
    在表格下面加个全选的复选框,点击全选后,表格里的复选框全都选中,表格同时变色.谢谢再解答一下.
      

  7.   

    晕死！也只是一个触发时间！你只是要答案并不是学习！懂得变通的人！很快就可以从上面的例子中得到答案 <script>
    function CheckAll(form)  {
      for (var i=0;i<form.elements.length;i++){
        var e = form.elements[i];
        if (e.name != 'chkall')       
    e.checked = form.chkall.checked; 
       }
      }
    </script>
    这样一个就是触发全选的！
    <INPUT onclick=CheckAll(this.form) type=checkbox value=on name=chkall>
    如此调用即可
      

  8.   


    style.backgroundColor = "yellow";
    把这么一句结合进去不就完了？