<!doctype html>

<html>

<head>

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

    <title>表格隔行变色_CSS实现鼠标悬停高亮</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');            //默认奇数数行背景色

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

    });

    </script>

    <style type="text/css">

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

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

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

    .tr_even:hover,.tr_odd:hover{background-color:red;}      /* 通过CSS实现鼠标悬停高亮色 */

    </style>

</head>

<body>

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

        <tr class="headCls">

            <th>CSS实现鼠标悬停高亮</th>

            <th>CSS实现鼠标悬停高亮</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>

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

  1. JavaScript实例---表格隔行变色以及移入鼠标高亮

    <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> ...

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

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

  3. 表格隔行变色_jQuery控制实现鼠标悬停高亮

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

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

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

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

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

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

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

  7. JS实现表格隔行变色

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

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

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

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

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

随机推荐

  1. python全栈开发-前方高能-函数

    python_day_9 一.今日主要内容 函数: 函数:对功能的封装 语法: def 函数名(形参): 函数体 函数名(实参) 函数名:命名规则和变量一样 函数的返回值: return, 函数执行完 ...

  2. KEIL5的安装

    安装注意事项 1.最好不要安装在带有中文路径的文件夹. 2.试用版的Keil MDK只能编译32K以下的代码,代码大于32K只能使用正版或破解版才能编译通过. 安装MKD 这里选择MKD512A版本安 ...

  3. 学习HTML 第五节.简单交互 加个按钮

    学习HTML 第五节.简单交互 也许你和我一样,对页面排版的兴趣小于网页交互,那么我们就先略过一些章节,直接先学一下简单交互. 前面点击图片打开链接的网址,已经是最简单的交互方式了,复杂的方式则需要用 ...

  4. CentOS 下 MySQL 5.6 基于 RPM 的下载、安装、配置

    CentOS 下 MySQL 5.6 基于 RPM 的下载.安装.配置 系统: CentOS 7 x86_64 MySQL 版本: 5.6.40 安装方式: RPM 下载 下载地址 操作系统 选择 R ...

  5. MySQL Proxy和 Amoeba 工作机制浅析

    MySQL Proxy处于客户端应用程序和MySQL服务器之间,通过截断.改变并转发客户端和后端数据库之间的通信来实现其功能,这和WinGate 之类的网络代理服务器的基本思想是一样的.代理服务器是和 ...

  6. curl常用用法

    -v显示请求详细信息 curl www.baidu.com -v -X 指定请求方式 GET请求 curl -X GET http://localhost:8080/search?data=123 # ...

  7. javascript中的取反再取反~~

    操作符~, 是按位取反的意思,表面上~~(取反再取反)没有意义,实际上在JS中可以将浮点数变成整数. <html> <script> var myArray = new Arr ...

  8. 互评Alpha版本——二次元梦之队——“I Do”

    基于NABCD评论作品,及改进建议 1.根据(不限于)NABCD评论作品的选题 (1)N(Need,需求) 随着智能科技的发展和普及,编程教育的重要性已经逐渐凸显出来.美国前总统奥巴马曾说“编程应当与 ...

  9. 王者荣耀交流协会第三次Scrum立会

    会议时间:2017年10月22号   18:00-18:32,时长32分钟. 会议地点:中快餐厅二楼第二排倒数第二个桌子. 立会内容: 1.每位同学汇报了今日工作. 2.通过讨论我们决定用存excel ...

  10. 《JavaScript》页面跳转

    window.location.href: <i onclick="window.location.href = '/Form/Form_Write/Index?viewname=Fo ...