zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    11、sqlite
    10、正则
    9、bs4
    8、异常与import
    7、文件
    6、函数
    4、字典及集合
    3、元组
    1、python基本语法
    shell编程 15 --- shell 脚本调试技巧
  • 原文地址:https://www.cnblogs.com/renxiaoren/p/5274837.html
Copyright © 2011-2022 走看看