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

2019-11-20 09:47:30

字体：大中小

来源：转载

供稿：网友

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

上一篇：浅谈bootstrap源码分析之scrollspy(滚动侦听)

下一篇：全面解析Bootstrap中tab（选项卡）的使用方法