1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  5.     <title>表格隔行变色_jQuery控制实现鼠标悬停高亮</title>
  6.     <meta name="keywords" content="" />
  7.     <meta name="description" content="" />
  8.     <script type="text/javascript" src="../jquery-1.8.2.js"></script>
  9.     <script type="text/javascript">
  10.     $(function(){
  11.         //通过jQuery控制表格隔行换色，并鼠标悬停变色
  12.         $('tr:even:gt(0)').addClass('tr_even');    //默认偶数行背景色，无视标题行用:gt(0)
  13.         $('tr:odd').addClass('tr_odd');            //默认奇数数行背景色
  14.         $('tr:gt(0)').mouseover(function(){
  15.             $(this).addClass('tr_hover');           //通过jQuery控制实现鼠标悬停上的背景色，无视标题行用:gt(0)
  16.         }).mouseout(function(){
  17.             $(this).removeClass('tr_hover');       //通过jQuery控制实现鼠标悬停上的背景色
  18.         });
  19.         ////////////////////////////////////////////////////////////////
  20.     });
  21.  
  22.     </script>
  23.     <style type="text/css">
  24.     .headCls{background-color:#ccc;}    /* 标题背景色 */
  25.     .tr_even{background-color:#EBF8FF}  /* 偶数行背景色 */
  26.     .tr_odd{background-color:#DDECF3}   /* 奇数行背景色 */
  27.     .tr_hover{background-color:#ffffcc} /* 鼠标悬停上的背景色 */
  28.     </style>
  29. </head>
  30. <body>
  31.     <table border="1" width="100%" cellspacing="0" cellpadding="0">
  32.         <tr class="headCls">
  33.             <th>jQuery控制实现鼠标悬停高亮</th>
  34.             <th>jQuery控制实现鼠标悬停高亮</th>
  35.         </tr>
  36.         <tr>
  37.             <td>data1_1</td>
  38.             <td>data1_2</td>
  39.         </tr>
  40.         <tr>
  41.             <td>data2_1</td>
  42.             <td>data2_2</td>
  43.         </tr>
  44.         <tr>
  45.             <td>data3_1</td>
  46.             <td>data3_2</td>
  47.         </tr>
  48.         <tr>
  49.             <td>data4_1</td>
  50.             <td>data4_2</td>
  51.         </tr>
  52.         <tr>
  53.             <td>data5_1</td>
  54.             <td>data5_2</td>
  55.         </tr>
  56.     </table>
  57.  
  58. </body>
  59. </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. kobject和kset的一些学习心得

    #include <linux/module.h> #include <linux/kernel.h> #include <linux/kobject.h> #in ...

  2. HDU-2844：Coins（多重背包+二进制优化）

    链接:HDU-2844:Coins 题意:给你n个种类的钱和对应的数量,同统计一下从1到m能够凑成的钱有多少个. 题解:C[i] = 1 + 2 + 4 + ··· + 2^k + a (0 < ...

  3. vue2.0做移动端开发用到的相关插件和经验总结1.0

    最近在用vue2.0做微信公众号相关的前端开发,经过这次开发实践,现将项目中用到的相关比较实用的插件及遇到的相关问题进行整理,希望和大家共同交流...... cssrem:一个CSS值转REM的VSC ...

  4. leetcode个人题解——#31 Next Permutation

    写这题时脑子比较混乱,重写了一遍wiki大佬的解法. 算法: According to Wikipedia, a man named Narayana Pandita presented the fo ...

  5. Visual Studio 调试时无法命中断点

    1.查看代码优化是否勾选,如有去掉勾选 2.确保是在Debug模式下设置的断点 3.确保在启动时未修改代码即“要求源文件和原始版本完全匹配” 4.DLL的引用问题

  6. 关于Amazon.com Seller 网络以及IP地址更换 官方回答

    Greetings from Amazon Seller Support, I understand your concern that there will be a change of IP ad ...

  7. VisualSVN Server的配置和使用方法

    VisualSVN Server的配置和使用方法 VisualSVN Server的配置和使用方法[服务器端] 安装好VisualSVN Server后[安装过程看这里],运行VisualSVN Se ...

  8. 软工实践-Alpha 冲刺 （5/10）

    队名:起床一起肝活队 组长博客:博客链接 作业博客:班级博客本次作业的链接 组员情况 组员1(队长):白晨曦 过去两天完成了哪些任务 描述: 已经解决登录注册等基本功能的界面. 完成了主界面的基本布局 ...

  9. struts2--文件上传大小

    Struts2文件上传的大小限制问题 问题:上传大文件报错-- 解决:修改struts.xml文件中的参数如下 <constant name="struts.multipart.max ...

  10. sql高级主题资料（网络复制）

    SQL Server 常用高级语法笔记   自从用了EF后很少写sql和存储过程了,今天需要写个比较复杂的报告,翻出了之前的笔记做参考,感觉这个笔记还是很有用的,因此发出来和大家分享. 1.case. ...