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 相关文章推荐
JavaScript 乱码问题
Aug 06 Javascript
基于jQuery的计算文本框字数的代码
Jun 06 Javascript
js indexOf()定义和用法
Oct 21 Javascript
javascript截取字符串小结
Apr 28 Javascript
jQuery复合事件结合toggle()方法的用法示例
Jun 10 jQuery
JavaScript 保护变量不被随意修改的实现代码
Sep 27 Javascript
vue实现同一个页面可以有多个router-view的方法
Sep 20 Javascript
Node.js assert断言原理与用法分析
Jan 04 Javascript
解决vue初始化项目时,一直卡在Project description上的问题
Oct 31 Javascript
js 动态校验开始结束时间的实现代码
May 25 Javascript
React如何创建组件
Jun 27 Javascript
正则表达式基础与常用验证表达式
Jun 16 Javascript
全面解析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
PHP 时间日期操作实战
2011/08/26 PHP
php使用cookie保存用户登录的用户名实例
2015/01/26 PHP
PHP简单获取及判断提交来源的方法
2016/04/22 PHP
php实现的debug log日志操作类实例
2016/07/12 PHP
CI框架使用composer安装的依赖包步骤与方法分析
2016/11/21 PHP
PHP实现打包zip并下载功能
2018/06/12 PHP
JavaScript this调用规则说明
2010/03/08 Javascript
js实现点击注册按钮开始读秒倒计时的小例子
2013/05/11 Javascript
jquery插件jquery倒计时插件分享
2013/12/27 Javascript
JavaScript 实现鼠标拖动元素实例代码
2014/02/24 Javascript
跟我学Nodejs(一)--- Node.js简介及安装开发环境
2014/05/20 NodeJs
在myeclipse中如何加入jquery代码提示功能
2014/06/03 Javascript
推荐9款炫酷的基于jquery的页面特效
2014/12/07 Javascript
JS+CSS实现六级网站导航主菜单效果
2015/09/28 Javascript
DOM中事件处理概览与原理的全面解析
2016/08/16 Javascript
Bootstrap模态框调用功能实现方法
2016/09/19 Javascript
js实现文字选中分享功能
2017/01/25 Javascript
js实现百度搜索提示框
2017/02/05 Javascript
记React connect的几种写法(小结)
2018/09/18 Javascript
详解在Node.js中发起HTTP请求的5种方法
2019/01/10 Javascript
原生js+css调节音量滑块
2020/01/15 Javascript
vue.js实现简单的计算器功能
2020/02/22 Javascript
python安装PIL模块时Unable to find vcvarsall.bat错误的解决方法
2016/09/19 Python
酷! 程序员用Python带你玩转冲顶大会
2018/01/17 Python
Python调用adb命令实现对多台设备同时进行reboot的方法
2018/10/15 Python
python实现一个简单的ping工具方法
2019/01/31 Python
Falsk 与 Django 过滤器的使用与区别详解
2019/06/04 Python
python 通过手机号识别出对应的微信性别(实例代码)
2019/12/22 Python
Python os库常用操作代码汇总
2020/11/03 Python
html5视频播放_动力节点Java学院整理
2017/07/13 HTML / CSS
NBA德国官方网上商店:NBA Store德国
2018/04/13 全球购物
教师节促销活动方案
2014/02/14 职场文书
群众路线教育实践活动对照检查材料思想汇报(副处级领导)
2014/10/04 职场文书
学生通报表扬范文
2015/05/04 职场文书
MYSQL如何查看进程和kill进程
2022/03/13 MySQL
Golang 链表的学习和使用
2022/04/19 Golang