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


Posted in Javascript onJune 06, 2016

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="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  <script src="jquery-table-1.0.js"></script>
 </head>
 <body>
 <script>
 ;$(function(){
  $('#table1').table({
      
    //arguments , properties
    evenRowClass : 'evenRow1',
    oddRowClass : 'oddRow1',
    currentRowClass : 'currentRow1'  
    
  });

  $('input[type=button]').click(function(){
      var text = $('input[type=text]').val();
      $('#table1 tr:not("#thead")').hide().filter(':contains("'+text+'")').show();
    });

  });

 </script>

  <div id="ss">
 <input type="text" placeholder="请输入查询数据">
 <input id="search" type="button" value="查询">
 </div>

 <table id="table1">
  <tr id="thead">
    <th>姓名</th>
    <th>学号</th>
    <th>性别</th>
    <th>年龄</th>

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

  <tr>
    <td>李四</td>
    <td>2</td>
    <td>男</td>
    <td>30</td>
  </tr>
  <tr>
    <td>张三</td>
    <td>1</td>
    <td>女</td>
    <td>20</td>
  </tr>

  <tr>
    <td>李四</td>
    <td>2</td>
    <td>男</td>
    <td>30</td>
  </tr>
  <tr>
    <td>王五</td>
    <td>3</td>
    <td>男</td>
    <td>30</td>
  </tr>
  <tr>
    <td>王五</td>
    <td>3</td>
    <td>男</td>
    <td>30</td>
  </tr>
  <tr>
    <td>张三</td>
    <td>1</td>
    <td>女</td>
    <td>20</td>
  </tr>

  <tr>
    <td>李四</td>
    <td>2</td>
    <td>男</td>
    <td>30</td>
  </tr>

 </table>
 </body>
</html>

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

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

Javascript 相关文章推荐
懒就要懒到底——鼠标自动点击(含时间判断)
Feb 20 Javascript
event.srcElement 用法笔记e.target
Dec 18 Javascript
Javascript中的回调函数和匿名函数的回调示例介绍
May 12 Javascript
node.js中的fs.appendFileSync方法使用说明
Dec 17 Javascript
JavaScript中的异常捕捉介绍
Dec 31 Javascript
JavaScript里四舍五入函数round用法实例
Apr 06 Javascript
jQuery判断checkbox选中状态
May 12 Javascript
JavaScript实现实时更新系统时间的实例代码
Apr 04 Javascript
js实现Tab选项卡切换效果
Jul 17 Javascript
Vue基于vuex、axios拦截器实现loading效果及axios的安装配置
Apr 26 Javascript
Openlayers实现测量功能
Sep 25 Javascript
WebStorm无法正确识别Vue3组合式API的解决方案
Feb 18 Vue.js
全面解析Bootstrap中tab(选项卡)的使用方法
Jun 06 #Javascript
全面解析Bootstrap中scrollspy(滚动监听)的使用方法
Jun 06 #Javascript
JavaScript 数组中最大最小值
Jun 05 #Javascript
使用three.js 画渐变的直线
Jun 05 #Javascript
jquery判断input值不为空的方法
Jun 05 #Javascript
jQuery四种选择器使用及示例
Jun 05 #Javascript
JavaScript和jquery获取父级元素、子级元素、兄弟元素的方法
Jun 05 #Javascript
You might like
使用sockets:从新闻组中获取文章(二)
2006/10/09 PHP
直接生成打开窗口代码,不必下载
2008/05/14 Javascript
html数组字符串拼接的最快方法
2009/09/16 Javascript
node.js中的console.time方法使用说明
2014/12/09 Javascript
JS+Canvas 实现下雨下雪效果
2016/05/18 Javascript
JS获取年月日时分秒的方法分析
2016/11/28 Javascript
View.post() 不靠谱的地方你知道多少
2017/08/29 Javascript
JS+canvas动态绘制饼图的方法示例
2017/09/12 Javascript
jQuery实现table表格信息的展开和缩小功能示例
2018/07/21 jQuery
vue-router beforeEach跳转路由验证用户登录状态
2018/12/26 Javascript
解决vue打包后刷新页面报错:Unexpected token
2019/08/27 Javascript
JavaScript(js)处理的HTML事件、键盘事件、鼠标事件简单示例
2019/11/19 Javascript
JavaScript实现点击切换功能
2021/01/27 Javascript
[01:05:36]VP vs TNC Supermajor小组赛B组 BO3 第二场 6.2
2018/06/03 DOTA
深入讨论Python函数的参数的默认值所引发的问题的原因
2015/03/30 Python
python aiohttp的使用详解
2019/06/20 Python
Python 把序列转换为元组的函数tuple方法
2019/06/27 Python
python进程的状态、创建及使用方法详解
2019/12/06 Python
Python如何将将模块分割成多个文件
2020/08/04 Python
python3 使用ssh隧道连接mysql的操作
2020/12/05 Python
CSS3 transform的skew属性值图文详解
2014/07/21 HTML / CSS
HTML5触摸事件演化tap事件介绍
2016/03/25 HTML / CSS
使用layui实现左侧菜单栏及动态操作tab项的方法
2020/11/10 HTML / CSS
匈牙利墨盒和碳粉购买网站:CDRmarket
2018/04/14 全球购物
快时尚眼镜品牌,全国连锁眼镜店:LOHO眼镜生活
2018/10/08 全球购物
贝佳斯官方网站:Borghese
2020/05/08 全球购物
创业融资计划书
2014/04/25 职场文书
新闻工作者先进事迹
2014/05/26 职场文书
实习单位推荐信
2015/03/27 职场文书
售后服务质量承诺书
2015/04/29 职场文书
收入证明怎么写
2015/06/12 职场文书
换届选举主持词
2015/07/03 职场文书
2019年12月24日平安夜祝福语集锦
2019/12/24 职场文书
Nginx搭建rtmp直播服务器实现代码
2021/03/31 Servers
QT与javascript交互数据的实现
2021/05/26 Javascript
MyBatis-Plus 批量插入数据的操作方法
2021/09/25 Java/Android