jquery table的隔行变色 鼠标事件

一、鼠标事件

　　mouseover(function(){}); 鼠标移动到目标事件

　　mouseout(function(){}); 鼠标离开目标的事件

二、具体应用代码

<body>
    <h3>Books Info:</h3>
    <table id="table">
        <tr>
            <td>书名</td>
            <td>价格</td>
            <td>描述</td>
        </tr>
        <tr>
            <td>《海的女儿》</td>
            <td>11.00</td>
            <td>悬崖上的金鱼姬，海里的女儿</td>
        </tr>
    </table> 
</body>
<script type="text/javascript">
    $(function(){
        $("#table").find("tbody>tr:even")   //偶数行的操作
          .mouseover(function(){
              $(this).css("background-color","#9AAAC7");
        }).mouseout(function(){
              $(this).css("background-color","#f9f9f9");
        }).end()
        .find("tbody>tr:odd")   //奇数行的操作
        .mouseover(function(){
                $(this).css("background-color","#9AAAC7");
          }).mouseout(function(){
                $(this).css("background-color","#e5e9f0");
          });
    });
//注：在jQuery中，执行完mouseover或者mouseout等方法之后，都会返回当前的对象，所以可以进行链式操作 
</script>

 

posted @ 2016-03-14 10:39  renxiaoren  阅读(350)  评论(0)  编辑  收藏  举报