<!doctype html>

<html>

<head>

    <meta http-equiv="content-type" content="text/html; charset=utf-8" />

    <title>表格隔行变色_jQuery控制实现鼠标悬停高亮</title>

    <meta name="keywords" content="" />

    <meta name="description" content="" />

    <script type="text/javascript" src="../jquery-1.8.2.js"></script>

    <script type="text/javascript">

    $(function(){

        //通过jQuery控制表格隔行换色，并鼠标悬停变色

        $('tr:even:gt(0)').addClass('tr_even');    //默认偶数行背景色，无视标题行用:gt(0)

        $('tr:odd').addClass('tr_odd');            //默认奇数数行背景色

        $('tr:gt(0)').mouseover(function(){

            $(this).addClass('tr_hover');           //通过jQuery控制实现鼠标悬停上的背景色，无视标题行用:gt(0)

        }).mouseout(function(){

            $(this).removeClass('tr_hover');       //通过jQuery控制实现鼠标悬停上的背景色

        });

        ////////////////////////////////////////////////////////////////

    });

    </script>

    <style type="text/css">

    .headCls{background-color:#ccc;}    /* 标题背景色 */

    .tr_even{background-color:#EBF8FF}  /* 偶数行背景色 */

    .tr_odd{background-color:#DDECF3}   /* 奇数行背景色 */

    .tr_hover{background-color:#ffffcc} /* 鼠标悬停上的背景色 */

    </style>

</head>

<body>

    <table border="1" width="100%" cellspacing="0" cellpadding="0">

        <tr class="headCls">

            <th>jQuery控制实现鼠标悬停高亮</th>

            <th>jQuery控制实现鼠标悬停高亮</th>

        </tr>

        <tr>

            <td>data1_1</td>

            <td>data1_2</td>

        </tr>

        <tr>

            <td>data2_1</td>

            <td>data2_2</td>

        </tr>

        <tr>

            <td>data3_1</td>

            <td>data3_2</td>

        </tr>

        <tr>

            <td>data4_1</td>

            <td>data4_2</td>

        </tr>

        <tr>

            <td>data5_1</td>

            <td>data5_2</td>

        </tr>

    </table>

</body>

</html>

表格隔行变色_jQuery控制实现鼠标悬停高亮的更多相关文章

  1. 表格隔行变色_CSS实现鼠标悬停高亮

    <!doctype html> <html> <head> <meta http-equiv="content-type" content ...

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

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

  3. jQuery实现表格隔行换色且感应鼠标高亮行变色

    jQuery插件实现表格隔行换色且感应鼠标高亮行变色 http://www.jb51.net/article/41568.htm jquery 操作DOM的基本用法分享http://www.jb51. ...

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

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

  5. jquery实现html表格隔行变色

    效果图 实现代码: 通过css控制样式,利用jquery的addClass方法实现 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Trans ...

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

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

  7. 案例(拖拽对话框、高清放大镜、自制滚动条、元素的隐藏方式、表格隔行变色、tab切换效果、字符串拼接、刷新评论)

    一.拖拽对话框 <style> .of{ width: 500px; } #link,#close{ text-decoration: none; margin: 0 10px; font ...

  8. JS实现表格隔行变色

    用到的鼠标事件:(1)鼠标经过 onmouseover:(2)鼠标离开 onmouseout 核心思路:鼠标经过 tr 行的时候,当前行会改变背景颜色,鼠标离开的时候去掉背景颜色. 注意:第一行(th ...

  9. css3表格隔行变色和表格选中变颜色代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. mysql学习----支持Emoji表情

    但发现了一个问题,iPhone上有Emoji表情,插入Mysql时失败了,报如下异常: java.sql.SQLException: Incorrect string value: '\xF0\x9F ...

  2. 提取验证码到winform上webbroswer和axwebbroswer

    在网上只有webbroswer的代码,所以自己又修改了修改改成axwebbroswer的 public static class yanZhengMaHelp { //webbrowser验证码 pu ...

  3. selenium自动化之稳定版本环境介绍

    大家都知道,目前selenium版本已经升级到3.0了,selenium3只是在selenium2的基础上做了一些调整,最明显的区别就是 selenium2对Firefox的支持最高只支持46及以下版 ...

  4. Linux 安装FastDFS<单机版>(使用Mac远程访问)

    阅读本文需要先阅读安装FastDFS<准备> 一 编译环境 yum install gcc-c++ yum -y install libevent yum install -y pcre ...

  5. No.03---Vue学习之路之模块化组织

    前两篇讲解了一下 Vuex 的基本使用方法,可是在实际项目中那么写肯定是不合理的,如果组件太多,不可能把所有组件的数据都放到一个 store.js 中的,所以就需要模块化的组织 Vuex,首先看一下 ...

  6. Pycharm 2018.2.1-2018.1

    请支持正版,谢谢! 下载激活包 激活包地址 解压后会得到两个包: JetbrainsCrack-2.10-release-enc.jar JetbrainsCrack-3.1-release-enc. ...

  7. qq浏览器的用户体验

    用户界面: qq浏览器的用户界面简介,把一些不必要的东西去点,可以很容易让用户找到自己想看的网页,很方便. 记住用户的选择: qq浏览器和QQ相连,可是用QQ账户登录,并且会记住自己访问的高频网页,以 ...

  8. WITH HINDSIGHT

    设想和目标 我们的软件要解决什么问题?是否定义得很清楚?是否对典型用户和典型场景有清晰的描述? 我们是要做一个基于文件同步展示的语音软件:感谢之前的两次项目审核,我们定义与描述得很清楚: 我们达到目标 ...

  9. lintcode-424-逆波兰表达式求值

    424-逆波兰表达式求值 求逆波兰表达式的值. 在逆波兰表达法中,其有效的运算符号包括 +, -, *, / .每个运算对象可以是整数,也可以是另一个逆波兰计数表达. 样例 ["2" ...

  10. 某客的《微信小程序》从基础到实战视频教程

    第 1 部分 微信小程序从基础到实战课程概要   第 1 节 微信小程序从基础到实战课程概要   1.1微信小程序从基础到实战课程概要   第 2 部分 初识微信小程序    第 1 节 微信小程序简 ...