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查詢功能的簡單實例就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持武林網。
新聞熱點
疑難解答
