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,同时美化它.借鉴一下这 ...
随机推荐
- try except 异常处理
1.捕获指定异常 2.捕获所有异常
- 应当将指针变量用“==”或“！=”与 NULL 比较
应当将指针变量用“==”或“!=”与 NULL 比较. 指针变量的零值是“空”(记为 NULL). 尽管 NULL 的值与 0 相同,但是两者意义不 同. 假设指针变量的名字为 p,它与零值比较的标准 ...
- linux -- ubuntu 脚本开机自启动
有一个脚本想在ubuntu 虚拟机开机时,自动运行. 创建脚本文件 在“/opt/lampp/”下新建一个脚本文件:lampp_start.sh #!/bin/bash /opt/lampp/lamp ...
- Windows下基于eclipse的Storm应用开发与调试
原创文章,转载请注明: 转载自http://www.cnblogs.com/tovin/p/3971113.html 本文以一个简单的example来讲解如何开发storm应用程序 1.创建maven ...
- js 离开页面
序言 大家是否经常遇到在关闭网页的时候,会看到一个确定是否离开当前页面的提示框?想一些在线测试系统.信息录入系统等就经常会有这一些提示,避免用户有意或者无意中关掉了页面,导致数据丢失.这里面的实现过程 ...
- Buff系统
BUFF状态可以通过游戏道具.使用技能.被攻击技能.NPC.宠物等等实现.BUFF状态,有很多技能在释放后,会对目标产生一定时间的额外影响,这些影响有的是增益的,有的是减免的.比如法师的“熔岩地”,会 ...
- jquery插件大全
241个jquery插件—jquery插件大全 免费JQuery插件 推荐12款非常有用的流行 jQuery 插件
- shell脚本中，将所有的参数值否赋给一个变量或者说将所有的参数合成一个字符串，获取所有参数
需求描述: 在写脚本的过程中,遇到这样的一个需求,将脚本执行过程中,传递给 脚本的所有的参数,都赋值给一个变量然后在对这个变量进行处理. 测试过程: 通过以下的脚本将所有传递给脚本的变量都赋值一个变量 ...
- NFS挂在文件系统启动参数
1.tiny6410(增强版)bootargs启动参数(周学伟)noinitrd console=ttySAC0,115200 lcd=S70 init=/init root=/dev/nfs rw ...
- BaiduMap 鼠标绘制矩形选框四个顶角坐标的获取
雪影工作室版权全部.转载请注明[http://blog.csdn.net/lina791211] 1.博文产生原因 在使用百度Map开放API进行开发的时候,遇到了一个需求,非常easy的一个需求. ...