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,同时美化它.借鉴一下这 ...
随机推荐
- ASP.NET四种页面导航方式之比较与选择
一.超级链接 从一个表单进入另一个表单最简单的方式是使用HTML超级链接控件.在Web表单中,使用超级链接的HTML代码类如: <a href="WebForm2.aspx" ...
- 转载：mysql如果数据不存在，则插入新数据，否则更新的实现方法
转自:http://www.jb51.net/article/28885.htm //如果不存在,则插入新数据 $sql = "INSERT INTO {$ecs->table(‘ca ...
- TF42064: The build number already exists for build definition error in TFS2010
In TFS2008, deleting a build removes it from the database itself. If you delete a build called Build ...
- CentOS下screen 命令详解
一.背景 系统管理员经常需要SSH 或者telent 远程登录到Linux 服务器,经常运行一些需要很长时间才能完成的任务,比如系统备份.ftp 传输等等.通常情况下我们都是为每一个这样的任务开一个远 ...
- [mysql] 查询前几条记录
From: http://www.cnblogs.com/xuxm2007/archive/2010/11/16/1878211.html SELECT * FROM table LI ...
- [mysql] 先按某字段分组再取每组中前N条记录
From: http://blog.chinaunix.net/uid-26729093-id-4294287.html 请参考:http://bbs.csdn.net/topics/33002126 ...
- 设置同样字体大小，chrome浏览器有时字体偏大的解决办法（转）
本文是找了在网上搜了好久才找到非常棒的一篇文章,很好的解决了这个问题. 原文地址:https://github.com/amfe/article/issues/10 这个特性被称做「Text Auto ...
- sftp,get命令使用*通配符的方式获取批量的文件
需求描述: 今天在使用sftp进行get文件的时候,有很多文件名类似的文件,以为还是需要一个一个get 后来发现get也可以使用通配符的方式进行匹配获取多个文件,在此记录下 操作过程: 1.通过sft ...
- WPF 本地化（多语言）
如果你的程序需要本地化,考虑的因素诸多,例如:当文本改变后,控件的当前高度,宽度 是否合适.所在的位置是否合适.字体.布局是否合适?如果已经构建了一个真正自适应的布局,就不会有问题.用户界面应当能够调 ...
- Python 处理输入输出
sys.stdin.read() 用于接收标准输入,也就是让用户通过键盘进行输入sys.stdout.write() 用于打印标准输出,也就是把输入的数据输出到屏幕sys.stderr.write() ...