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

fayeyang

2019-04-26

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 对象级插件开发

table jquery defaults