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对象的property和prototype是这样一种关系
Mar 24 Javascript
js中字符替换函数String.replace()使用技巧
Aug 14 Javascript
给超链接添加特效鼠标移动展示提示信息且随鼠标移动
Oct 17 Javascript
jQuery中dequeue()方法用法实例
Dec 29 Javascript
javascript事件模型实例分析
Jan 30 Javascript
jquery表单验证插件(jquery.validate.js)的3种使用方式
Mar 28 Javascript
基于javascript实现漂亮的页面过渡动画效果附源码下载
Oct 26 Javascript
完美实现八种js焦点轮播图(下篇)
Apr 20 Javascript
js基于myFocus实现轮播图效果
Feb 14 Javascript
实现图片首尾平滑轮播(JS原生方法—节流)
Oct 17 Javascript
Vue工程模板文件 webpack打包配置方法
Dec 26 Javascript
js module大战
Apr 19 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
咖啡常见的种类
2021/03/03 新手入门
SCP远程VPS快速搬家和WDCP升级php5.3安装memcached和eaccelerator教程
2017/07/27 PHP
用roll.js实现的图片自动滚动+鼠标触动的特效
2007/03/18 Javascript
javascript 单选框,多选框美化代码
2008/08/01 Javascript
学习ExtJS(二) Button常用方法
2009/10/07 Javascript
firefox下对ajax的onreadystatechange的支持情况分析
2009/12/14 Javascript
Js 时间间隔计算的函数(间隔天数)
2011/11/15 Javascript
Javascript的getYear、getFullYear、getUTCFullYear异同分享
2011/11/30 Javascript
超级简单的jquery操作表格方法
2014/12/15 Javascript
AngularJS基础 ng-value 指令简单示例
2016/08/03 Javascript
AngularJS学习笔记(三)数据双向绑定的简单实例
2016/11/08 Javascript
深入理解javascript中的 “this”
2017/01/17 Javascript
深入理解Angular4订阅(Subscribe)与取消
2017/11/22 Javascript
Angularjs Promise实例详解
2018/03/15 Javascript
vue的diff算法知识点总结
2018/03/29 Javascript
JavaScript实现数字前补“0”的五种方法示例
2019/01/03 Javascript
简述ES6新增关键字let与var的区别
2019/08/23 Javascript
Javascript类型判断相关例题及解析
2020/08/26 Javascript
vue3.0搭配.net core实现文件上传组件
2020/10/29 Javascript
python中requests模块的使用方法
2015/04/08 Python
python删除列表内容
2015/08/04 Python
socket + select 完成伪并发操作的实例
2017/08/15 Python
利用python编写一个图片主色转换的脚本
2017/12/07 Python
对Python 3.2 迭代器的next函数实例讲解
2018/10/18 Python
Python3远程监控程序的实现方法
2019/07/15 Python
Python迭代器iterator生成器generator使用解析
2019/10/24 Python
使用Keras中的ImageDataGenerator进行批次读图方式
2020/06/17 Python
Python 实现国产SM3加密算法的示例代码
2020/09/21 Python
CSS3 渐变(Gradients)之CSS3 线性渐变
2016/07/08 HTML / CSS
介绍CSS3使用技巧5个
2009/04/02 HTML / CSS
凯特方迪化妆品官网:Kat Von D Beauty
2016/11/15 全球购物
运动会稿件50字
2014/02/17 职场文书
副职竞争上岗演讲稿
2014/05/12 职场文书
仓库管理员岗位职责
2015/02/03 职场文书
美术教师求职信范文
2015/03/20 职场文书
幼儿园家长工作总结2015
2015/04/25 职场文书