相思资源网 Design By www.200059.com

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="/UploadFiles/2021-04-02/jquery.min.js">

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

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

标签:
jquery,table,插件

相思资源网 Design By www.200059.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
相思资源网 Design By www.200059.com

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

暂无jquery插件方式实现table查询功能的简单实例的评论...

RTX 5090要首发 性能要翻倍!三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。

据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。