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,同时美化它.借鉴一下这 ...
随机推荐
- [从jQuery看JavaScript]-变量与作用域链
jQuery片段: var // Will speed up references to window, and allows munging its name. window = this, // ...
- sendEvent()
sendEvent()(QObject *receiver, QEvent *event)可以将自己创建事件event发送给制定的receiver 例如, //创建按键事件 QKeyEvent key ...
- window,centos双系统坏了
在centos中格式化SD卡的时候,操作错误,误将windows系统C盘的给格式化了.C盘是ntf格式的,现在却变为了fat32的格式. 重启系统,发现还是可以进入到centos,但是window进入 ...
- HDU 1020：Encoding
pid=1020">Encoding Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Ja ...
- Erlang TCP Socket的接收进程的2种方案
转自:http://blog.csdn.net/summerhust/article/details/8740973 一旦打开了一个使用TCP连接的套接字,它就始终保持打开状态,直至任何一方关闭它或因 ...
- 关于quartus ii软件中注释乱码问题的解决方法
乱码现象: 解决办法: 打开文件所在工程找到该verilog文件(后缀名是.v),使用记事本打开,这时你会看到注释好好的没乱码,很高兴是不,不用着急.接下来点击文件再另存为,选择编码:UTF-8,点保 ...
- perl 实现ascall 码转换
今天需要在perl中实现一个字母表, 总不能把26个字母一个一个写出来,于是查资料,可以利用ascii码转换把数字转换成对应的字母 chr函数可以利用ascii编码把数字转换成对应的字母 perl - ...
- linux centos 系统怎么设置中文模式
首先,需要安装一下linux桌面程序.一般系统有自带的桌面,然后我们打开系统,进入系统登录界面 2 我们先输入我们的帐号然后回车,之后接着输入密码,你会发现最下面边框有让你选择语言的选项 3 我们点击 ...
- 最短路径问题-Floyd算法
概念 最短路径也是图的一个应用,即寻找图中某两个顶点的最短路径长度. 实际应用:例如确定某两个城市间的坐火车最短行车路线长度等. Floyd algorithm 中文名就是弗洛伊德算法. 算法思路:用 ...
- myeclipse 配置
1.配置java 新建系统变量JAVA_HOME 和CLASSPATH 变量名:JAVA_HOME 变量值:C:\Program Files\Java\jdk1.7.0变量名:CLASSPATH 变量 ...