一、鼠标事件

　　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>

jquery table的隔行变色 鼠标事件的更多相关文章

  1. jQuery table tr隔行变色，鼠标移入移出变色，鼠标点击变色

    .trover { background: #f9f9f9; } .trclick { background: #c4e8f5; } .treven{ background:#CCFFCC; } .t ...

  2. 用JQuery实现表格隔行变色和突出显示当前行

    用JQuery实现表格隔行变色和突出显示当前行 上源码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "htt ...

  3. jQuery选择器实现隔行变色和使用javaScript实现隔行变色

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <!--什么是选择器? jQuery选择器继承了 ...

  4. JS---案例：表格隔行变色(鼠标划过背景色恢复)

    案例:表格隔行变色(鼠标划过背景色恢复) <!DOCTYPE html> <html> <head lang="en"> <meta ch ...

  5. 我的第一个jQuery插件--表格隔行变色

    虽然网上有大量的插件供我们去使用,但不一定有一款适合你的,必要的时候还是要自己动手去敲的.下面,开始我的第一个插件... 参考<锋利的JQuery>,JQuery为开发插件增设了俩个方法: ...

  6. table表格隔行变色

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. jQuery选择器实现隔行变色

    <script type="text/javascript"> $(function(){ $("#tableName tr:nth-child(even)& ...

  8. 隔行变色&&鼠标移入变色

    <html lang="en"> <head> <meta charset="UTF-8"> <title>Do ...

  9. jquery插件之表格隔行变色并鼠标滑过高亮显示

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现表格隔行变色,且鼠标移动在表格的某一行上时,该行能高亮显示.整体代码如 ...

随机推荐

  1. 蓝桥杯--算法训练 区间k大数查询

                                                                                 算法训练 区间k大数查询   时间限制:1.0 ...

  2. poj 1039 Pipe（几何基础）

    Pipe Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 9932   Accepted: 3045 Description ...

  3. .net常見面試題(二)

    一．选择题 1. 下面叙述正确的是___C___. A.算法的执行效率与数据的存储结构无关 B.算法的空间复杂度是指算法程序中指令(或语句)的条数 C.算法的有穷性是指算法必须能在执行有限个步骤之后终 ...

  4. python-面向对象(四)——类成员的访问方式汇总

    类成员的访问方式 #!/usr/bin/env python # _*_coding:utf-8 _*_ class pepole(object): '''This is __doc__ inform ...

  5. MongoDB：The Definitive Guide CHAPTER 1 Introduction

    MongoDB is a powerful, flexible, and scalable data store. It combines the ability to scale out with ...

  6. Spring各种注解标签作用详解

    @Autowired和@Resource等注解是将Spring容器中的bean注入到属性,而@Component等注解是将bean放入Spring容器中管理. @Autowired spring2.1 ...

  7. Java 8 新特性概述

    Oracle 在 2014 年 3 月发布了 Java 8 正式版,该版本是一个有重大改变的版本,对 JAVA 带来了诸多新特性.其中主要的新特性涵盖:函数式接口.Lambda 表达式.集合的流式操作 ...

  8. Day 1 @ RSA Conference Asia Pacific & Japan 2016

    # 国内出发 早上8:45的航班,首次从深圳机场乘坐国际航班(先前去日本.欧洲都从香港走),就提前了3个小时出发. 乘taxi到机场30分钟不到,135元.到了T3 4号出发口,发现check-in的 ...

  9. Karma-Jasmine之安装与实例详解（一）

    本文先介绍karma-jasmine的安装.接下来的(二)中主要通过实例利用断言库详解karma-jasmine如何进行单元测试. Karma介绍 首先说一下karma,官方是这样给出的,karma不 ...

  10. jquerymobile-可折叠内容(Collapsible content)

    可能我们在开发中遇到过这样的问题,我们只是看到一个题目或者简单的介绍,然后一点击会在下面展开对应的详细的内容.在jqm中实现这个效果很简单.下面给出一段例子代码: <!DOCTYPE html& ...