<!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. javaweb(三十九)——数据库连接池

    一.应用程序直接获取数据库连接的缺点 用户每次请求都需要向数据库获得链接,而数据库创建连接通常需要消耗相对较大的资源,创建时间也较长.假设网站一天10万访问量,数据库服务器就需要创建10万次连接,极大 ...

  2. Java 注解 初探 （一）

    自JDK1.5之后,就开始出现注解.想要了解注解的来源和注解的用法,通过搜索引擎大都是针对某一个注解的解释,很难找到关于注解系列的文章,便自己看下. 基于Annotation的注释,说明Annotai ...

  3. 优化 VR 动作类游戏《Space Pirate Trainer*》以便在英特尔® 集成显卡上实现卓越的表现

    Space Pirate Trainer* 是一款面向 HTC Vive*.Oculus Touch* 和 Windows Mixed Reality* 的原创发行游戏.版本 1.0 于 2017 年 ...

  4. Windows单机配置Kafka环境

    首先确保机器已经安装好Zookeeper,Zookeeper安装参考 Windows单机配置Zookeeper环境 然后确保Zookeeper是正常启动状态 下载Kafka http://kafka. ...

  5. 网络流小结(HNOI2019之前)

    \(\text{一:Dinic最大流}\) 最坏复杂度 \({\mathcal O(n^2m)}\) 一般可以处理 \(10^4\) ~ \(10^5\) 的网络. struct Edge { int ...

  6. 洛谷【P1052】过河

    https://www.luogu.org/problemnew/show/P1052 题目描述 在河上有一座长度为 L 的独木桥, 一只青蛙想沿着独木桥从河的一侧跳到另一侧. 在桥上有一些石子, 青 ...

  7. /proc/sys目录下各文件参数说明

    linux 其他知识目录 原文链接:https://blog.csdn.net/hshl1214/article/details/4596583 一.前言本文档针对OOP8生产环境,具体优化策略需要根 ...

  8. 只执行一次的js 函数。

    function runOnce(fn, context) { //控制让函数只触发一次 return function () { try { fn.apply(context || this, ar ...

  9. Alpha阶段事后诸葛亮会议记录

    此作业要求参见:https://edu.cnblogs.com/campus/nenu/2018fall/homework/2324 组名:可以低头,但没必要 组长:付佳 组员:张俊余  李文涛  孙 ...

  10. 今目标登录时报网络错误E110

    今目标登录的时候报错了,错误代码:E110不论怎么修改都修复不了,百度相关资料也没有,只能联系客服. 经过好久终于联系上了客服,客服给出的解决方案是修改:Enternet选项: 第一步:打开,控制面板 ...