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 相关文章推荐
用JQuery实现表格隔行变色和突出显示当前行的代码
Feb 10 Javascript
JavaScript类型系统之Object详解
Jan 07 Javascript
js+canvas简单绘制圆圈的方法
Jan 28 Javascript
JS实现数组去重复值的方法示例
Feb 18 Javascript
Bootstrap入门教程一Hello Bootstrap初识
Mar 02 Javascript
Js自动截取字符串长度,添加省略号(……)的实现方法
Mar 06 Javascript
jfinal与bootstrap的登出实战详解
Nov 27 Javascript
vue2.0获取鼠标位置的方法
Sep 13 Javascript
解决vue-cli webpack打包后加载资源的路径问题
Sep 25 Javascript
Vue传参一箩筐(页面、组件)
Apr 04 Javascript
extjs图表绘制之条形图实现方法分析
Mar 06 Javascript
JS实现页面鼠标点击出现图片特效
Aug 19 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
php组合排序简单实现方法
2016/10/15 PHP
php+javascript实现的动态显示服务器运行程序进度条功能示例
2017/08/07 PHP
基于jquery的回到页面顶部按钮
2011/06/27 Javascript
javascript四舍五入函数代码分享(保留后几位)
2013/12/10 Javascript
jQuery中slice()方法用法实例
2015/01/07 Javascript
JavaScript 学习笔记之操作符
2015/01/14 Javascript
深入浅析JavaScript中对事件的三种监听方式
2015/09/29 Javascript
js实现仿微博滚动显示信息的效果
2015/12/21 Javascript
JQuery实现的按钮倒计时效果
2015/12/23 Javascript
jquery按回车键实现表单提交的简单实例
2016/05/25 Javascript
jquery文字填写自动高度的实现方法
2016/11/07 Javascript
浅述节点的创建及常见功能的实现
2016/12/15 Javascript
Node.js中看JavaScript的引用
2017/04/22 Javascript
vue.js实现条件渲染的实例代码
2017/06/22 Javascript
C#实现将一个字符转换为整数
2017/12/12 Javascript
vue element 生成无线级左侧菜单的实现代码
2019/08/21 Javascript
js实现GIF图片的分解和合成
2019/10/24 Javascript
vue数据响应式原理知识点总结
2020/02/16 Javascript
windows下python模拟鼠标点击和键盘输示例
2014/02/28 Python
Python中使用hashlib模块处理算法的教程
2015/04/28 Python
Python爬取附近餐馆信息代码示例
2017/12/09 Python
Python将多个excel表格合并为一个表格
2021/02/22 Python
Python爬虫_城市公交、地铁站点和线路数据采集实例
2018/01/10 Python
机器学习实战之knn算法pandas
2019/06/22 Python
详解Python中的各种转义符\n\r\t
2019/07/10 Python
如何使用Python发送HTML格式的邮件
2020/02/11 Python
使用Pycharm(Python工具)新建项目及创建Python文件的教程
2020/04/26 Python
Python如何获取文件路径/目录
2020/09/22 Python
VICHY薇姿美国官方网站:欧洲药房第一的抗衰老品牌
2017/11/22 全球购物
UNIX文件系统分类
2014/11/11 面试题
计算机专业毕业生的自我评价
2013/11/18 职场文书
学前教育求职自荐信范文
2013/12/25 职场文书
2014年大班元旦活动方案
2014/02/26 职场文书
三好学生竞选稿
2015/11/21 职场文书
python 网络编程要点总结
2021/06/18 Python
Mysql分库分表之后主键处理的几种方法
2022/02/15 MySQL