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

时间：2021-05-26

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').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查询功能的简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章