一、鼠标事件

　　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. Climbing Worm

    Climbing Worm Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Tot ...

  2. 遍历form表单

    //表单 var form = new Ext.form.FormPanel({ //创建表单面板 labelAlign: 'center', //水平对齐方式 layout: 'form', //布 ...

  3. UVA 10256 The Great Divide （凸包，多边形的位置关系）

    题目链接:http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=34148 [思路] 凸包 求出红蓝点的凸包,剩下的问题就是判断两个凸 ...

  4. 解决windows10搜索不到内容的问题

    windows 10的搜索突然搜不到程序了, 网上查询说要重建索引,方法如下: 1.按ctr+R键,输入%LocalAppData%\Packages\windows.immersivecontrol ...

  5. CSS围住浮动元素的三种方法

    浮动元素脱离了文档流,其父元素看不到它了,因而不会包围它.浮动会“扩散”到下一个清除浮动的元素处.这会引起不想要的页面布局效果. 清除浮动的方法有三种: 1.父元素overflow:hidden 2. ...

  6. android设备连接不上电脑的解决方法

    先检查手机usb调试是否开启,已经开启还是连不上按照以下步骤操作: 1. 打开cmd,输入adb devices  查看设备是否连接 2.服务未启动,先杀掉服务:adb kill-server 3.启 ...

  7. 学习 opencv---(9)形态学图像处理（一）：膨胀和腐蚀

    本篇文章中,我们一起探究了图像处理中,最基本的形态学运算--膨胀与腐蚀.浅墨在文章开头友情提醒,用人物照片做腐蚀和膨胀的素材图片得到的效果会比较惊悚,毁三观的,不建议尝试.......... 一.理论 ...

  8. Theano FCN实现与训练经验与教训小结

    NaN 计算softmax loss时要用numeric robust 的计算方式. softmax与 loss可能要分开计算. 得到前者的计算方式可以是常规方法. 但计算后者时要注意无穷大和NaN的 ...

  9. 在网上浏览.NET的所有代码，并且让你的Visual Studio的go to definition(F12)指向在线代码

    博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:在网上浏览.NET的所有代码,并且让你的Visual Studio的go to definition(F ...

  10. angularjs ngrepeat filter

    angularjs ng-repeat filter演示样例 地址