单击表格中行来使行变颜色


<style>
.aaa{
background-color:red
}
.bbb{
background-color:blue
}
</style>
<table border='1' style="width:400">
<tr class="aaa" onmouseover="this.className='bbb'" onmouseout="this.className='aaa'">
<td>
111
</td>
<td>
aaa
</td>
</tr>
<tr class="aaa" onmouseover="this.className='bbb'" onmouseout="this.className='aaa'">
<td>
111
</td>
<td>
aaa
</td>
</tr>
<tr class="aaa" onmouseover="this.className='bbb'" onmouseout="this.className='aaa'">
<td>
111
</td>
<td>
aaa
</td>
</tr>
</table>

解决方案 »

  1.   


    <table border='1' style="width:400">
    <tr style="background-color:red" onmouseover="this.style.backgroundColor='blue'" onmouseout="this.style.backgroundColor='red'">
    <td>
    111
    </td>
    <td>
    aaa
    </td>
    </tr>
    <tr style="background-color:red" onmouseover="this.style.backgroundColor='blue'" onmouseout="this.style.backgroundColor='red'">
    <td>
    111
    </td>
    <td>
    aaa
    </td>
    </tr>
    <tr style="background-color:red" onmouseover="this.style.backgroundColor='blue'" onmouseout="this.style.backgroundColor='red'">
    <td>
    111
    </td>
    <td>
    aaa
    </td>
    </tr>
    </table>
      

  2.   

    <html>
    <head>
    <script language="javascript">
    function  change(v1){
    v1.style.backgroundColor='green';
    }
    function   reset(v2){
    //alert("test");
    v2.style.backgroundColor='red';
    }          
    </script>
    </head>
    <body>
    <table border='1' style="width:400">
        <tr style="background-color:red" onmouseover="change(this);" onmouseout="reset(this);">
            <td>
                111
            </td>
            <td>
                aaa
            </td>
        </tr>
        <tr style="background-color:red" onmouseover="change(this);" onmouseout="reset(this);">
            <td>
                111
            </td>
            <td>
                aaa
            </td>
        </tr>
        <tr style="background-color:red" onmouseover="change(this);" onmouseout="reset(this);">
            <td>
                111
            </td>
            <td>
                aaa
            </td>
        </tr>
    </table>
    </body>
    </html>