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').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' 
 });

});

附上代码：

 
 
 
 
 
 
 
 
  *{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;
  }

 
    
  
 
 
 

  
 
 
 

 

  

    
姓名
    
学号
    
性别
    
年龄

  
  

    
张三
    
1
    
男
    
20
  

  

    
李四
    
2
    
男
    
30
  
  

    
张三
    
1
    
女
    
20
  

  

    
李四
    
2
    
男
    
30
  
  

    
王五
    
3
    
男
    
30
  
  

    
王五
    
3
    
男
    
30
  
  

    
张三
    
1
    
女
    
20
  

  

    
李四
    
2
    
男
    
30
  

 
 

通过这个例子学到了jquery 对象级插件开发

以上这篇jquery插件方式实现table查询功能的简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持考高分网。