jquery插件方式实现table查询功能的简单实例


Posted in Javascript onJune 06, 2016

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查询功能的简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 开发中规范性的一点感想
Jun 23 Javascript
突发奇想的一个jquery插件
Nov 19 Javascript
jQuery中获取checkbox选中项等操作及注意事项
Nov 24 Javascript
javascript中if和switch,==和===详解
Jul 30 Javascript
纯javascript判断查询日期是否为有效日期
Aug 24 Javascript
javascript闭包(Closure)用法实例简析
Nov 30 Javascript
全面解析Bootstrap手风琴效果
Apr 17 Javascript
Sortable.js拖拽排序使用方法解析
Nov 04 Javascript
Javascript 制作图形验证码实例详解
Dec 22 Javascript
jQuery动态操作表单示例【基于table表格】
Dec 06 jQuery
vue router 传参获取不到的解决方式
Nov 13 Javascript
JavaScript canvas实现雪花随机动态飘落
Feb 08 Javascript
全面解析Bootstrap中tab(选项卡)的使用方法
Jun 06 #Javascript
全面解析Bootstrap中scrollspy(滚动监听)的使用方法
Jun 06 #Javascript
JavaScript 数组中最大最小值
Jun 05 #Javascript
使用three.js 画渐变的直线
Jun 05 #Javascript
jquery判断input值不为空的方法
Jun 05 #Javascript
jQuery四种选择器使用及示例
Jun 05 #Javascript
JavaScript和jquery获取父级元素、子级元素、兄弟元素的方法
Jun 05 #Javascript
You might like
php中将数组转成字符串并保存到数据库中的函数代码
2013/09/29 PHP
Yii2实现中国省市区三级联动实例
2017/02/08 PHP
PHP操作redis实现的分页列表,新增,删除功能封装类与用法示例
2018/08/04 PHP
PHP析构函数destruct与垃圾回收机制的讲解
2019/03/22 PHP
PHP与SQL语句写一句话木马总结
2019/10/11 PHP
一个可以随意添加多个序列的tag函数
2009/07/21 Javascript
Jquery模仿Baidu、Google搜索时自动补充搜索结果提示
2013/12/26 Javascript
jQuery 弹出层插件(推荐)
2016/05/24 Javascript
js插件dropload上拉下滑加载数据实例解析
2016/07/27 Javascript
聊一聊JS中的prototype
2016/09/29 Javascript
Bootstrap基本插件学习笔记之Tooltip提示工具(18)
2016/12/08 Javascript
js实现网页的两个input标签内的数值加减(示例代码)
2017/08/15 Javascript
node.js 发布订阅模式的实例
2017/09/10 Javascript
Vue 动态添加路由及生成菜单的方法示例
2019/06/20 Javascript
vue选项卡切换登录方式小案例
2019/09/27 Javascript
js实现登录拖拽窗口
2020/02/10 Javascript
一起来了解一下JavaScript的预编译(小结)
2021/03/01 Javascript
[01:11:11]Alliance vs RNG 2019国际邀请赛淘汰赛 败者组BO1 8.20.mp4
2020/07/19 DOTA
跟老齐学Python之从if开始语句的征程
2014/09/14 Python
纯Python开发的nosql数据库CodernityDB介绍和使用实例
2014/10/23 Python
使用Python制作获取网站目录的图形化程序
2015/05/04 Python
pandas 对series和dataframe进行排序的实例
2018/06/09 Python
Python Numpy:找到list中的np.nan值方法
2018/10/30 Python
PyQt5根据控件Id获取控件对象的方法
2019/06/25 Python
基于python及pytorch中乘法的使用详解
2019/12/27 Python
tensorflow2.0保存和恢复模型3种方法
2020/02/03 Python
Python @property原理解析和用法实例
2020/02/11 Python
python中sklearn的pipeline模块实例详解
2020/05/21 Python
python 实现非极大值抑制算法(Non-maximum suppression, NMS)
2020/10/15 Python
css3中less实现文字长阴影(long shadow)
2020/04/24 HTML / CSS
canvas仿写贝塞尔曲线的示例代码
2017/12/29 HTML / CSS
美国LOGO设计公司:The Logo Company
2018/07/16 全球购物
《小猪家的桃花树》教学反思
2014/04/11 职场文书
2014年评职称工作总结
2014/11/20 职场文书
幼儿教师辞职信范文
2015/03/02 职场文书
拯救大兵瑞恩观后感
2015/06/09 职场文书