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

});

附上代码：

 
 
 
 
 
 
 
 
    
  
 
 
 

  

 
 
 

 

  

    
姓名
    
学号
    
性别
    
年龄

  
  

    
张三
    
1
    
男
    
20
  

  

    
李四
    
2
    
男
    
30
  
  

    
张三
    
1
    
女
    
20
  

  

    
李四
    
2
    
男
    
30
  
  

    
王五
    
3
    
男
    
30
  
  

    
王五
    
3
    
男
    
30
  
  

    
张三
    
1
    
女
    
20
  

  

    
李四
    
2
    
男
    
30
  

 
 

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

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