鼠标经过改变表格背景属性~~

一般要是改变颜色属性的话~用<td   onmouseover="this.style.backgroundColor='red'"   onmouseout="this.style.backgroundColor='#FFFFFF'">~
只能移动到一行~~改变一行的颜色~~~
怎么才能~两行合并在一起~~~~移动到一行~下面那一行的颜色也变~~~

解决方案 »

  1.   

    <html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>test</title>
    <script>
    function mouse_over(obj){
    var row = obj.rowIndex;
    obj.style.backgroundColor = "red";
    var t = document.getElementById("table1");
    if(row+1<t.rows.length){
    t.rows(row+1).style.backgroundColor = "red";
    }
    }
    function mouse_out(obj){
    var row = obj.rowIndex;
    obj.style.backgroundColor = "#fff";
    var t = document.getElementById("table1");
    if(row+1<t.rows.length){
    t.rows(row+1).style.backgroundColor = "#fff";
    }
    }
    </script>
    </head><body><table border="1" width="100%" id="table1">
    <tr onmouseover="mouse_over(this)" onmouseout="mouse_out(this)">
    <td>11　</td>
    <td>12　</td>
    </tr>
    <tr onmouseover="mouse_over(this)" onmouseout="mouse_out(this)">
    <td>21　</td>
    <td>22　</td>
    </tr>
    <tr onmouseover="mouse_over(this)" onmouseout="mouse_out(this)">
    <td>31　</td>
    <td>32　</td>
    </tr>
    <tr onmouseover="mouse_over(this)" onmouseout="mouse_out(this)">
    <td>41　</td>
    <td>42　</td>
    </tr>
    <tr onmouseover="mouse_over(this)" onmouseout="mouse_out(this)">
    <td>51　</td>
    <td>52　</td>
    </tr>
    </table></body></html>
      

  2.   

    是不是这样？<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>限制字符输入</title>
    </head>
    <script language="javascript" type="text/javascript">
    function chanBG(obj)
    {
    var o=obj;
    o.style.backgroundColor="red";
    o.nextSibling.style.backgroundColor="red";
    }
    function chanBGOut(obj)
    {
    var o=obj;
    o.style.backgroundColor="";
    o.nextSibling.style.backgroundColor="";
    }
    </script>
    <body>
    <table width="100%" border="1">
      <tr onMouseOver="javascript:chanBG(this);" onMouseOut="javascript:chanBGOut(this);">
        <td>&nbsp;</td>
      </tr>
      <tr onMouseOver="javascript:chanBG(this);" onMouseOut="javascript:chanBGOut(this);">
        <td>&nbsp;</td>
      </tr>
      <tr onMouseOver="javascript:chanBG(this);" onMouseOut="javascript:chanBGOut(this);">
        <td>&nbsp;</td>
      </tr>
      <tr onMouseOver="javascript:chanBG(this);" onMouseOut="javascript:chanBGOut(this);">
        <td>&nbsp;</td>
      </tr>
      <tr onMouseOver="javascript:chanBG(this);" onMouseOut="javascript:chanBGOut(this);">
        <td>&nbsp;</td>
      </tr>
      <tr onMouseOver="javascript:chanBG(this);" onMouseOut="javascript:chanBGOut(this);">
        <td>&nbsp;</td>
      </tr>
    </table>
    </body>
    </html>
      

  3.   


     $(document).ready(function() {
                $("#table1 tr").each(function() {
                    $(this).bind("mouseover", function() {
                    $(this).attr("style", "background-color:Red");
                        $(this).next().attr("style", "background-color:Red");
                    });                $(this).bind("mouseout", function() {
                    $(this).attr("style", "background-color:White");
                    $(this).next().attr("style", "background-color:White");
                    });
                });
            });
     <table id="table1">
             <tr>
                  <td>Name</td>
                  <td>Age</td>
             </tr>
              <tr>
                  <td>Zhao</td>
                  <td>30</td>
             </tr>
              <tr>
                  <td>Chen</td>
                  <td>25</td>
             </tr>
        </table>