我想让鼠标移入的时候table的一行改变颜色
移出的时候颜色再还原回去。但是行头和其余列的颜色一开始是不一样的~
移出鼠标的时候就变成了一样的颜色了~行头和其余列之间只有一个 class属性不同 (CSS里填充不同颜色的)
其他属性都一样
我要怎么来判断  让他在鼠标移出的时候也还原成原来的样子呀?
要用什么属性或者什么方法做判断呢?

解决方案 »

  1.   

    <table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#DBDFFB"onmouseover="this.style.background='#FF9900';" onmouseout="this.style.background='#FFFFFF'" >
      

  2.   

    回[wxj276]:谢谢提示~我再试一下~谢谢
      

  3.   


    <html>
        <head>
            <meta http-equiv="content-type" content="text/html; charset=utf-8">
            <META http-equiv="Content-Style-Type" content="text/css">
        </head>
        <script language=javascript>
            var t, n, c;
            var lastrow;
            var lastbgcolor=[];
            lastbgcolor[0]="#ffffff";
            lastbgcolortr="#ffffff"
            function over(){
                document.getElementById("tb").style.backgroundColor="red"
            }
            window.onload=function(){
                t = document.getElementById("tb");            n = t.rows.length;
                for(var i=0;i<n;i++){                t.rows[i].onmouseover = function(){
                        if(lastrow == this) return false;
                        if(lastrow!=null){
                            lastrow.style.backgroundColor = lastbgcolortr;
                            var c=lastrow.getElementsByTagName("td");
                            for(k=0;k<c.length;k++){
                                c[k].style.backgroundColor=lastbgcolor[k];
                            }
                        }
     
                        lastrow = this;                        lastbgcolortr=this.style.backgroundColor;
                        var b=this.getElementsByTagName("td");
                        for(j=0;j<b.length;j++){
                            lastbgcolor[j]=b[j].style.backgroundColor;
                            b[j].style.backgroundColor="#EEE";
                        }                };
                }
                          
            }
        </script>
        <body >
            <table id="tb" border=1px gray> 
                <tr style="background:#FFFFE0"> <td>11 </td> <td>12 </td> <td id="a1" style="background-color:#FFDDE0">13 </td> <td>14 </td> <td>15 </td> </tr> 
                <tr> <td>21 </td> <td>22 </td> <td id="a2" style="background-color:#FFDDE0">23 </td> <td>24 </td> <td>25 </td> </tr> 
                <tr> <td>31 </td> <td>32 </td> <td id="a3" style="background-color:#FFDDE0">33 </td> <td>34 </td> <td>35 </td> </tr> 
                <tr> <td>41 </td> <td>42 </td> <td  id="a4" style="background-color:#FFDDE0">43 </td> <td>44 </td> <td>45 </td> </tr> 
                <tr> <td>51 </td> <td>52 </td> <td id="a5" style="background-color:#FFDDE0">53 </td> <td>54 </td> <td>55 </td> </tr> 
            </table>     </body>
    </html>
      

  4.   

    <script src="js/jquery.js"></script>
    <table border="1" id="s">
    <tr><td>a1</td> <td>a2</td></tr>
    <tr><td>b1</td><td>b2</td></tr>
    <tr><td>b1</td><td>b2</td></tr>
    <tr><td>b1</td><td>b2</td></tr>
    <tr><td>b1</td><td>b2</td></tr>
    </table>
    <script>
    $("#s").find("tr:gt(0)").mouseover(function(){$(this).css("background-color", "red");}).mouseout(function(){$(this).css("background-color", "");});
    </script>gt(0): 除去第一行之外的都变色,
      

  5.   


      <script type="text/javascript" src="Scripts/jquery-1.3.2.js">
        </script>
        <script type="text/javascript">
            $(document).ready(function() {
                $("#s tr:first-child").nextAll().each(function() {
                    $(this).mouseover(function() {
                        $(this).css("backgroundColor", "Red");
                    });
                    $(this).mouseout(function() {
                        $(this).css("backgroundColor", "White");
                    });
                });
            });
        </script>
      <table border="1" id="s"> 
                <tr> <td>a1 </td> <td>a2 </td> </tr> 
                <tr> <td>b1 </td> <td>b2 </td> </tr> 
                <tr> <td>b3 </td> <td>b4 </td> </tr> 
                <tr> <td>b5 </td> <td>b6 </td> </tr> 
                <tr> <td>b7 </td> <td>b8 </td> </tr> 
            </table> 
      

  6.   


    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gbk">
      </head>
       <style>
       .over {background-color:e9e9e9;};
       .out {background-color:989898;};
      .head {background-color:#FFDDE0;};
       </style>
        <script language=javascript>
    function over(obj){
    obj.className = "over" ;
    obj.childNodes[0].className = "" ;
    }
    function out(obj){
    obj.className = "out" ;
    obj.childNodes[0].className = "head" ;
    }
        </script>
      <body >
       <table id="tb" border=1px gray> 
            <tr class="out" onmouseover="over(this)" onmouseout="out(this)"> 
             <td class="head">11 </td> 
             <td>12 </td> 
             <td>13 </td> 
             <td>14 </td> 
             <td>15 </td> 
            </tr> 
            <tr class="out" onmouseover="over(this)" onmouseout="out(this)"> 
             <td class="head">21 </td> 
             <td>22 </td> 
             <td>23 </td> 
             <td>24 </td> 
             <td>25 </td>
            </tr> 
            <tr class="out" onmouseover="over(this)" onmouseout="out(this)"> 
             <td class="head">31 </td> 
             <td>32 </td> 
             <td>33 </td> 
             <td>34 </td> 
             <td>35 </td> 
            </tr> 
            <tr class="out" onmouseover="over(this)" onmouseout="out(this)"> 
             <td class="head">41 </td> 
             <td>42 </td> 
             <td>43 </td> 
             <td>44 </td> 
             <td>45 </td> 
            </tr> 
            <tr class="out" onmouseover="over(this)" onmouseout="out(this)"> 
             <td class="head">51 </td> 
             <td>52 </td>
             <td>53 </td>
             <td>54 </td> 
             <td>55 </td> 
            </tr> 
        </table> 
    </body>
    </html>
      

  7.   

    鼠标移出移除的时候将当前行的class改为默认的,行头不绑定事件