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>
  • 相关阅读:
    原型模式
    创造者模式
    抽象工厂模式
    工厂方法模式
    简单工厂模式
    HiveQl 基本查询
    使用VMware安装linux虚拟机以及相关配置
    大数据测试
    使用Pycharm创建一个Django项目
    LoadRunner监控window系统各项指标详解
  • 原文地址:https://www.cnblogs.com/renxiaoren/p/5274837.html
Copyright © 2011-2022 走看看