JQuery实现鼠标滑过表格时只有偶数行换颜色的问题，急等解决！！！

代码如下：<html>
<head>
<script language="javascript" src="jquery-1.5.2.js"></script>
<style>
.stuTbl
{
width:100%;
border-top:1px solid #a6b8cc;
border-right:1px solid #a6b8cc;
margin:0 auto;
border-collapse:collapse;
}tr.dynamic
{
background:#336699;
}tr.gray
{
background-color:Gray;
}tr.odd td
{
background:#dce7ef;
color:#465051;
border-bottom: 1px solid #a6b8cc;
border-left:1px solid #a6acb8;
padding:3px;
}
tr.even td
{
color:#465051;
border-bottom: 1px solid #a6b8cc;
border-left:1px solid #a6acb8;
padding:3px;
}
</style>
<script type="text/javascript">
<!--$(document).ready(function()
{
$("#lstTbl tr")
.mouseover(function()
{
$(this).addClass("dynamic");
})
.mouseout(function()
{
$(this).removeClass("dynamic");
});
$("#lstTbl tr:even").addClass("even");
$("#lstTbl tr:odd").addClass("odd");
$("#lstTbl tr").bind("click",function(key)
{
$("#lstTbl tr").removeClass("gray");
$(this).addClass("gray");
});
});//-->
</script>
</head>
<body>   
    <table id="lstTbl" class="stuTbl">   
        <thead>   
            <tr>   
                <td>学号</td>   
                <td>姓名</td>   
                <td>成绩</td>   
            </tr>   
        </thead>   
           
        <tbody>   
            <tr>   
                <td>1</td>   
                <td>Tom</td>   
                <td>98</td>   
            </tr>   
  
            <tr>   
                <td>2</td>   
                <td>Jerry</td>   
                <td>67</td>   
            </tr>   
  
            <tr>   
                <td>3</td>   
                <td>Tony</td>   
                <td>34</td>   
            </tr>   
  
            <tr>   
                <td>4</td>   
                <td>Steven</td>   
                <td>89</td>   
            </tr>   
        </tbody>   
    </table>   
</body> 

解决方案 »

  1.   


    .odd
    {
        background:#dce7ef;
        color:#465051;
        border-bottom: 1px solid #a6b8cc;
        border-left:1px solid #a6acb8;
        padding:3px;
    }
    .even
    {
        color:#465051;
        border-bottom: 1px solid #a6b8cc;
        border-left:1px solid #a6acb8;
        padding:3px;
    }css 这样写 。
      

  2.   


    <html>
    <head>    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>    <style>
            .stuTbl
            {
                width: 100%;
                border-top: 1px solid #a6b8cc;
                border-right: 1px solid #a6b8cc;
                margin: 0 auto;
                border-collapse: collapse;
            }
            tr.dynamic
            {
                background: #336699;
            }
            tr.gray
            {
                background-color: Gray;
            }
            .odd
            {
                background: #dce7ef;
            }
            td
            {
                color: #465051;
                border-bottom: 1px solid #a6b8cc;
                border-left: 1px solid #a6acb8;
                padding: 3px;
            }
        </style>    <script type="text/javascript">
    <!--$(document).ready(function()
    {
        $("#lstTbl tr")
        .mouseover(function()
        {
            $(this).addClass("dynamic");
        })
        .mouseout(function()
        {
            $(this).removeClass("dynamic");
        });
        //$("#lstTbl tr:even").addClass("even");
        $("#lstTbl tr:odd").addClass("odd");
        $("#lstTbl tr").bind("click",function(key)
        {
            $("#lstTbl tr").removeClass("gray");
            $(this).addClass("gray");
        });
    });//-->
        </script></head>
    <body>
        <table id="lstTbl" class="stuTbl">
            <thead>
                <tr>
                    <td>
                        学号
                    </td>
                    <td>
                        姓名
                    </td>
                    <td>
                        成绩
                    </td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        1
                    </td>
                    <td>
                        Tom
                    </td>
                    <td>
                        98
                    </td>
                </tr>
                <tr>
                    <td>
                        2
                    </td>
                    <td>
                        Jerry
                    </td>
                    <td>
                        67
                    </td>
                </tr>
                <tr>
                    <td>
                        3
                    </td>
                    <td>
                        Tony
                    </td>
                    <td>
                        34
                    </td>
                </tr>
                <tr>
                    <td>
                        4
                    </td>
                    <td>
                        Steven
                    </td>
                    <td>
                        89
                    </td>
                </tr>
            </tbody>
        </table>
    </body>
    再修改下 ，看看是不是这样 。
      

  3.   

    楼上可行，或者把
    tr.gray
    {
    background-color: Gray;
    }
    改成
    tr.gray td
    {
    background-color: Gray !important;
    }
    也行，代码用你自己的不变