jquery插件方式实现table查询功能
1.写插件部分，如下：
;(function($){
$.fn.plugin = function(options){
var defaults = {
//各种属性，各种参数
}
var options = $.extend(defaults, options);
this.each(function(){
//功能代码
var _this = this;
});
}
})(jQuery);
附上一个例子：
;(function($){
$.fn.table = function(options){
var defaults = {
//arguments , properties
evenRowClass : 'evenRow',
oddRowClass : 'oddRow',
currentRowClass : 'currentRow',
eventType : 'mouseover',
eventType2 : 'mouseout',
}
var options = $.extend(defaults, options);
this.each(function(){
//function code
var _this = $(this);
//even row
_this.find('tr:even:not("#thead")').addClass(options.evenRowClass);
//_this.find('#thead').removeClass(options.evenRowClass);
// odd row
_this.find('tr:odd').addClass(options.oddRowClass);
/*_this.find('tr').mouseover(function(){
$(this).addClass(options.currentRowClass);
}).mouseout(function(){
$(this).removeClass(options.currentRowClass);
});*/
_this.find('tr').bind(options.eventType, function(){
$(this).addClass(options.currentRowClass);
});
_this.find('tr').bind(options.eventType2, function(){
$(this).removeClass(options.currentRowClass);
});
});
return this;
}
})(jQuery);
html部分调用插件如下：
$();==$(function(){});==$(document).ready(); 等页面加载成功后执行
;$(function(){
$('#table1').table({
//arguments , properties
evenRowClass : 'evenRow1',
oddRowClass : 'oddRow1',
currentRowClass : 'currentRow1'
});
});
附上代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style>
*{margin:0; padding:0;}
table{
border-collapse:collapse;
width:100%;
border:1px solid red;
margin-top:50px;
text-align:center;
} tr, th, td{
height:30px;
border:1px solid red;
}
.evenRow1{
background:red;
}
.oddRow1{
background:orange;
}
.currentRow1{
background:blue;
}
#ss{
float:right;
margin-right:100px;
}
#search{
font-size:14px;
width:50px;
} </style>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="jquery-table-1.0.js"></script>
</head>
<body>
<script>
;$(function(){
$('#table1').table({ //arguments , properties
evenRowClass : 'evenRow1',
oddRowClass : 'oddRow1',
currentRowClass : 'currentRow1' }); $('input[type=button]').click(function(){
var text = $('input[type=text]').val();
$('#table1 tr:not("#thead")').hide().filter(':contains("'+text+'")').show();
}); }); </script> <div id="ss">
<input type="text" placeholder="请输入查询数据">
<input id="search" type="button" value="查询">
</div> <table id="table1">
<tr id="thead">
<th>姓名</th>
<th>学号</th>
<th>性别</th>
<th>年龄</th> </tr>
<tr>
<td>张三</td>
<td>1</td>
<td>男</td>
<td>20</td>
</tr> <tr>
<td>李四</td>
<td>2</td>
<td>男</td>
<td>30</td>
</tr>
<tr>
<td>张三</td>
<td>1</td>
<td>女</td>
<td>20</td>
</tr> <tr>
<td>李四</td>
<td>2</td>
<td>男</td>
<td>30</td>
</tr>
<tr>
<td>王五</td>
<td>3</td>
<td>男</td>
<td>30</td>
</tr>
<tr>
<td>王五</td>
<td>3</td>
<td>男</td>
<td>30</td>
</tr>
<tr>
<td>张三</td>
<td>1</td>
<td>女</td>
<td>20</td>
</tr> <tr>
<td>李四</td>
<td>2</td>
<td>男</td>
<td>30</td>
</tr> </table>
</body>
</html>
通过这个例子学到了jquery 对象级插件开发
jquery插件方式实现table查询功能的更多相关文章
- 雷林鹏分享：jQuery EasyUI 数据网格 - 添加查询功能
jQuery EasyUI 数据网格 - 添加查询功能 本实例演示如何从数据库得到数据,并将它们显示在数据网格(datagrid)中.然后演示如何根据用户输入的搜索关键词搜寻显示结果. 创建数据网格( ...
- 传统方式和插件方式 分别实现 分页 功能 pageHelper 插件
实现分页 这里提供两种方式 一种是传统的分页方式 一种是基于pageHelper插件 实现的分类 推荐使用后者 前者是一般开发的方式 思路 先手动创建一个 pageUtil 工具 ...
- 开发一个jQuery插件——多级联动菜单
引言 开发中,有好多地方用到联动菜单,以前每次遇到联动菜单的时候都去重新写,代码重用率很低,前几天又遇到联动菜单的问题,总结了下,发现可以开发一个联动菜单的功能,以后想用的时候就方便多了.项目中每个页 ...
- jQuery插件——多级联动菜单
jQuery插件——多级联动菜单 引言 开发中,有好多地方用到联动菜单,以前每次遇到联动菜单的时候都去重新写,代码重用率很低,前几天又遇到联动菜单的问题,总结了下,发现可以开发一个联动菜单的功能,以后 ...
- 常用在网站上的30个jQuery插件
jQuery插件是网页设计师最喜欢的.从图像滑块,图像画廊和导航插件,它们是如此众多,如此多样,如此惊人的和互动可以制作美化网站.在本文的在30个插件中,我认为必须在网站建设时用到.当然你现在可能不善 ...
- 常用Jquery插件整理大全
做项目的时候总是少不了要用到Jquery插件,但是Jquery插件有太多,每次都要花费一些时间,因此本人就抽时间整理了一些Jquery插件,每个插件都有Demo或者是使用文档供大家下载.整理了一晚上才 ...
- 转载 常用Jquery插件整理大全
常用Jquery插件整理大全 做项目的时候总是少不了要用到Jquery插件,但是Jquery插件有太多,每次都要花费一些时间,因此本人就抽时间整理了一些Jquery插件,每个插件都有Demo或者是使用 ...
- javaScript学习总结（二）——jQuery插件的开发
概要 jQuery插件就是以jQuery库为基础衍生出来的库,jQuery插件的好处是封装功能,提高了代码的复用性,加快了开发速度,现在网络上开源的jQuery插件非常多,随着版本的不停迭代越来越稳定 ...
- jquery插件，美化select标签
最近经常与select打交道,因为ie下的select实在太丑了,css怎么搞都搞不好看,因为程序已经写得差不多了,要再去模拟select改动太大,就想着能否不改动select,同时美化它.借鉴一下这 ...
随机推荐
- [mysql] MySQL Order By Rand()效率【转载】
最近由于需要大概研究了一下MYSQL的随机抽取实现方法.举个例子,要从tablename表中随机提取一条记录,大家一般的写法就是:SELECT * FROM tablename ORDER BY RA ...
- 巧用JS中的join方法操作字符串
1.将数组的元素组起一个字符串,以separator为分隔符,省略的话则用默认用逗号为分隔符 /** *把数组转换成特定符号分割的字符串 */ function arrayToString(arr,s ...
- Erlang TCP Socket的接收进程的2种方案
转自:http://blog.csdn.net/summerhust/article/details/8740973 一旦打开了一个使用TCP连接的套接字,它就始终保持打开状态,直至任何一方关闭它或因 ...
- Ironic , Openstack Baremetal Hypervisor
Ironic , Openstack Baremetal Hypervisor,首发于UnitedStack Inc.. 转自: http://ju.outofmemory.cn/entry/4876 ...
- informatica 中的workflow连接mysql数据配置DSN
先要下载mysqlodbc 一步步安装之后 ,再从管理工具里面找到ODBC,最后选择系统DSN,添加mysql驱动之后,进入添加编辑: 在workflow里面的配置连接字符串就写刚刚配置的连接名称 比 ...
- ASP.NET MVC自定义验证Authorize Attribute(包含cookie helper)
前几天Insus.NET有在数据库实现过对某一字段进行加密码与解密<使用EncryptByPassPhrase和DecryptByPassPhrase对MS SQLServer某一字段时行加密和 ...
- 怎样用Javascript定义一个类
其实Javascript中没有类这个定义,但是有类这个概念.很多人都写过这样的代码,对,没错,就是如下代码,清晰的不能再清晰了,就是一个关键字 function,然后定义一个方法名,方法名后紧跟一对括 ...
- CSS 解决IE6双倍距离BUG
只要满足下面3个条件才会出现这个BUG: 1)要为块状元素: 2)要左侧浮动: 3)要有左外边距(margin-left): 解决这个BUG很容易,只需要在相应的块状元素的 ...
- 机器学习技法之Aggregation方法总结：Blending、Learning（Bagging、AdaBoost、Decision Tree）及其aggregation of aggregation
本文主要基于台大林轩田老师的机器学习技法课程中关于使用融合(aggregation)方法获得更好性能的g的一个总结.包含从静态的融合方法blending(已经有了一堆的g,通过uniform:voti ...
- swift学习笔记之--方法
一.说明 跟oc一样,面向对象,swift重点额方法可以分为2大类: (1)实例方法 oc中为减号方法(对象方法) (2)类型方法 oc中的加号方法(类方法) 二.实例方法 只能是对象调用的方法 代码 ...