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,同时美化它.借鉴一下这 ...

随机推荐

AJAX跨域请求json数据的实现方法
这篇文章介绍了AJAX跨域请求json数据的实现方法,有需要的朋友可以参考一下我们都知道,AJAX的一大限制是不允许跨域请求. 不过通过使用JSONP来实现.JSONP是一种通过脚本标记注入的方式, ...
[oracle] oracle权限传递
三个用户:SYS.lisi.wangwu ① 系统权限的传递 lisi的初始化系统权限 SQL> select * from user_sys_privs; USERNAME PRIVILEGE ...
JAVA虚拟机、Dalvik虚拟机和ART虚拟机简要对比
1.什么是JVM? JVM本质上就是一个软件,是计算机硬件的一层软件抽象,在这之上才能够运行Java程序,JAVA在编译后会生成类似于汇编语言的JVM字节码,与C语言编译后产生的汇编语言不同的是, ...
e649. 处理焦点改变事件
component.addFocusListener(new MyFocusListener()); public class MyFocusListener extends FocusAdapter ...
jquery -- onchange
触发onchange 首先页面有一个input标签,并且已绑定onchange事件,如: 1 <input type="text" onchange="consol ...
OpenGL介绍
OpenGL是一个开放的三维图形软件包,它独立于窗口系统和操作系统,以它为基础开发的应用程序可以十分方便地在各种平台间移植:OpenGL可以与Visual C++紧密接口,便于实现机械手的有关计算和图 ...
mysql命令收集
1.显示当前用户的权限
c++ 开放随笔
1.设计或使用类时一定先弄清流程了解对象直接的关系(这个必须清楚) 如多对多,一对多,一对一关系.不然弄list map set时相对麻烦. 2.map 中key是不能重复的,可以看成一个主键,定 ...
java web - 为什么要使用spring struts
1.软件里有很多优秀的框架,有一种类型的框架,它的特点是建立在一个现有技术的基础上,提供和现有技术一样业务功能的技术框架,这个新的技术框架比原技术更加易用,更加健壮同时功能更加强大,例如:jQuery ...
这款Office密码破解工具，无坚不摧！
你是否曾经陷入过这样的尴尬:因为忘记Word文档密码去找了一个Word密码破解工具,接着又忘记Excel文档密码去找了一个专门破击Excel的工具,那么如果忘记PowerPoint.Outlook.P ...

jquery插件方式实现table查询功能

jquery插件方式实现table查询功能的更多相关文章

随机推荐

热门专题