jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码


Posted in Javascript onFebruary 25, 2016

本文实例讲述了jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果的方法。分享给大家供大家参考,具体如下:

此插件旨在实现表格隔行变色,且鼠标移动在表格的某一行上时,该行能高亮显示。整体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表格隔行变色且鼠标滑过高亮显示</title>
<style>
table{border-collapse:collapse;border:none;width:20%;}
table tr td{border:1px solid #ccc;text-align:center;cursor:pointer;}
.evenRow{background:#f0f0f0;}
.oddRow{background:#ff0;}
.activeRow{background:#f00;color:#fff;}
</style>
<script type="text/javascript" src="jquery-1.7.1.js"></script>
</head>
<body>
<script>
/*
* tableUI 0.1
* 使用tableUI可以方便地将表格提示使用体验。先提供的功能有奇偶行颜色交替,鼠标移上高亮显示
* Dependence jquery-1.7.1.js
*/ 
;(function($){
  $.fn.tableUI = function(options){ //经常用options表示有许多个参数 
  //各种属性、参数  创建一些默认值,拓展任何被提供的选项
  var defaults = {
    evenRowClass:"evenRow",
    oddRowClass:"oddRow",
    activeRowClass:"activeRow" 
    };
  var obj = $.extend(defaults,options);
  this.each(function(){ //this关键字代表了这个插件将要执行的jQuery对象  此处没有必要将this包在$号中如$(this),因为this已经是一个jQuery对象。  $(this)等同于 $($('#element'));
    //插件实现代码
    var thisTable = $(this); //获取当前对象  此时this关键字代表一个DOM元素  我们可以alert打印出此时的this代表的是object HTMLTableElement
    //添加奇偶行颜色
    $(thisTable).find("tr:even").addClass(obj.evenRowClass);
    $(thisTable).find("tr:odd").addClass(obj.oddRowClass);
    //添加活动行颜色
    $(thisTable).find("tr").mouseover(function(){
      $(this).addClass(obj.activeRowClass);
      });
    $(thisTable).find("tr").mouseout(function(){
      $(this).removeClass(obj.activeRowClass);
      });
    });
  };
})(jQuery);
//在这个封闭程序中,我们可以无限制的使用$符号来表示jQuery函数。
</script>
<table cellpadding="0" cellspacing="0">
 <tr><td>1</td><td>2</td><td>3</td></tr>
 <tr><td>1</td><td>2</td><td>3</td></tr>
 <tr><td>1</td><td>2</td><td>3</td></tr>
 <tr><td>1</td><td>2</td><td>3</td></tr>
 <tr><td>1</td><td>2</td><td>3</td></tr>
</table>
<script>
$(function(){
  $("table").tableUI();
  })
</script>
</body>
</html>

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
ExtJS 2.0实用简明教程 之获得ExtJS
Apr 29 Javascript
小议Javascript中的this指针
Mar 18 Javascript
javascript从image转换为base64位编码的String
Jul 29 Javascript
angularJS 中$attrs方法使用指南
Feb 09 Javascript
基于Bootstrap使用jQuery实现简单可编辑表格
May 04 Javascript
jquery-mobile基础属性与用法详解
Nov 23 Javascript
input输入密码变黑点密文的实现方法
Jan 09 Javascript
基于Bootstrap框架实现图片切换
Mar 10 Javascript
vue实现自定义多选与单选的答题功能
Jul 05 Javascript
js 将线性数据转为树形的示例代码
May 28 Javascript
Vuex的各个模块封装的实现
Jun 05 Javascript
在vue中实现禁止回退上一步,路由不存历史记录
Jul 22 Javascript
jQuery插件实现文字无缝向上滚动效果代码
Feb 25 #Javascript
jQuery zTree加载树形菜单功能
Feb 25 #Javascript
JavaScript实现搜索框的自动完成功能(一)
Feb 25 #Javascript
jquery插件之文字间歇自动向上滚动效果代码
Feb 25 #Javascript
jQuery插件ImageDrawer.js实现动态绘制图片动画(附源码下载)
Feb 25 #Javascript
利用jQuery中的ajax分页实现代码
Feb 25 #Javascript
Jquery zTree 树控件异步加载操作
Feb 25 #Javascript
You might like
phpStudy2016 配置多个域名期间遇到的问题小结
2017/10/19 PHP
JavaScript 自动分号插入(JavaScript synat:auto semicolon insertion)
2009/11/04 Javascript
javascript oop开发滑动(slide)菜单控件
2010/08/25 Javascript
Javascript 加载和执行-性能提高篇
2012/12/28 Javascript
使用JavaScript动态设置样式实现代码(2)
2013/01/25 Javascript
jQuery ReferenceError: $ is not defined 错误的处理办法
2013/05/10 Javascript
用JS做的简单的可折叠的两级树形菜单
2013/09/21 Javascript
点击页面其它地方隐藏该div的两种思路
2013/11/18 Javascript
javascript模拟枚举的简单实例
2014/03/06 Javascript
JS小游戏之宇宙战机源码详解
2014/09/25 Javascript
Javascript中的getUTCHours()方法使用详解
2015/06/10 Javascript
JS实现slide文字框缩放伸展效果代码
2015/11/05 Javascript
setTimeout学习小结
2017/02/08 Javascript
JavaScript之浏览器对象_动力节点Java学院整理
2017/07/03 Javascript
基于IView中on-change属性的使用详解
2018/03/15 Javascript
Vue 去除路径中的#号
2018/04/19 Javascript
在React项目中使用Eslint代码检查工具及常见问题
2018/10/10 Javascript
layui 实现表格某一列显示图标
2019/09/19 Javascript
vue实现给div绑定keyup的enter事件
2020/07/31 Javascript
nestjs返回给前端数据格式的封装实现
2021/02/22 Javascript
[09:13]DOTA2-DPC中国联赛 正赛 Ehome vs Magma 选手采访 1月19日
2021/03/11 DOTA
Python中pygal绘制雷达图代码分享
2017/12/07 Python
python字典一键多值实例代码分享
2019/06/14 Python
Python二维码生成识别实例详解
2019/07/16 Python
Python产生一个数值范围内的不重复的随机数的实现方法
2019/08/21 Python
Python获取excel内容及相关操作代码实例
2020/08/10 Python
html5 input属性使用示例
2013/06/28 HTML / CSS
意大利独特而优质的家居用品:Fazzini
2018/12/05 全球购物
安全事故检讨书
2014/01/18 职场文书
图书馆标语
2014/06/19 职场文书
大学生找工作求职信
2014/07/09 职场文书
地下停车场租赁协议范本
2014/10/07 职场文书
现实表现材料范文
2014/12/23 职场文书
给老婆的检讨书1000字
2015/01/01 职场文书
仓库管理制度范本
2015/08/04 职场文书
苹果的回收机器人可以通过拆解iPhone获取大量的金和铜并外公布了环境保护最新进展
2022/04/21 数码科技