[Jquery]hover实现table表单的特效显示

来源：互联网发布：java定时器任务超时编辑：程序博客网时间：2024/04/30 15:53

运行结果:

当鼠标移动到<td>80.00</td>中的时候这一行的颜色会发生变化，选择的那一格也会发生变化

代码：

<!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>测试3</title>    <script type="text/javascript"             src="Jscript/jquery-1.4.2.min.js"></script>    <style type="text/css">          .EvenColor{background-color: #FFC1E0}          .OddColor{background-color: #ff7575}          .RowColor{background-color: #FFBB77}          .CellColor{background-color: #FFE153}    </style>            <script type="text/javascript">        $(function () {            $("tr:even").addClass("EvenColor");        })        $(function () {            $("tr:odd").addClass("OddColor");        })        $(function (){            $("tr").hover(function(){                $(this).addClass("RowColor");            },function(){                $(this).removeClass("RowColor");              })         })        $(function (){            $("td").hover(function(){                $(this).addClass("CellColor");            },function(){                $(this).removeClass("CellColor");              })         })    </script></head><body><table border="1" width="61%" id="table2" cellspacing="0" cellpadding="5">        <tr>            <th width="50">编号</th>            <th width="183">商品名称</th>            <th width="94">价格</th>            <th>运费</th>                 </tr>        <tr>            <td width="50">0001</td>            <td width="183">iPod Video 30GB防尘硅胶套</td>            <td width="94">90.00</td>            <td>5.00</td>        </tr>        <tr>            <td width="50">0002</td>            <td width="183">红色iPod Video 30GB防尘硅胶套</td>            <td width="94">90.00</td>            <td>5.00</td>        </tr>        <tr>            <td width="50">0003</td>            <td width="183">天使蓝色iPod Video 30GB防尘硅胶套</td>            <td width="94">80.00</td>            <td>5.00</td>        </tr>        <tr>            <td width="50">0004</td>            <td width="183">恶魔iPod Video 30GB防尘硅胶套</td>            <td width="94">170.00</td>            <td>5.00</td>        </tr>        <tr>            <td width="50">0005</td>            <td width="183">iPod XcarLink for VW-DELTA</td>            <td width="94">701.00</td>            <td>10.00</td>        </tr>        <tr>            <td width="50">0006</td>            <td width="183">JVC JV-C80 Earphone Headphone</td>            <td width="94">100.00</td>            <td>5.00</td>        </tr>    </table></body></html>

0 0