网络编程

jquery插件方式实现table查询功能的简单实例
网络编程 2025/10/29 佚名
3 2

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,插件
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
白云城资源网 Copyright www.dyhadc.com
www.dyhadc.com 白云城资源网
129,905影音资源
244,626技术资源
111,817软件资源
578,645站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 更多链接
白云城资源网 Copyright www.dyhadc.com