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

1. 写插件部分，如下：

　　$.fn.plugin = function(options){

　　　　var defaults = {

　　　　　　//各种属性，各种参数

　　　　}

　　　　var options = $.extend(defaults,options);

　　　　this.each(function(){

　　　　　　//功能代码

　　　　　　var _this = this;

　　　　});

　　}

})(jQuery);

附上一个例子：

SEOver',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').mou<a href="https://www.jb51.cc/tag/SEO/" title="SEO">SEO</a>ver(function(){
    $(this).addClass(options.currentRowClass);
  }).mou<a href="https://www.jb51.cc/tag/SEO/" title="SEO">SEO</a>ut(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部分调用插件如下：

等页面加载成功后执行

　　$('#table1').table({

　　 //arguments,properties
　　evenRowClass : 'evenRow1',　　 oddRowClass : 'oddRow1',　　currentRowClass : 'currentRow1'
});

});

附上代码：

<Meta charset="UTF-8"> <Meta name="Generator" content="EditPlus®"> <Meta name="Author" content=""> <Meta name="Keywords" content=""> <Meta name="Description" content=""> Document

姓名学号性别年龄

</tr>
<tr>
<td>张三</td>
<td>1</td>
<td>男</td>
<td>20</td>
</tr>

</table>

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

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

猜你在找的jQuery相关文章