jquery插件方式实现table查询功能的简单实例
1.写插件部分,如下:
;(function($){ $.fn.plugin=function(options){ vardefaults={ //各种属性,各种参数 } varoptions=$.extend(defaults,options); this.each(function(){ //功能代码 var_this=this; }); } })(jQuery);
附上一个例子:
;(function($){ $.fn.table=function(options){ vardefaults={ //arguments,properties evenRowClass:'evenRow', oddRowClass:'oddRow', currentRowClass:'currentRow', eventType:'mouseover', eventType2:'mouseout', } varoptions=$.extend(defaults,options); this.each(function(){ //functioncode var_this=$(this); //evenrow _this.find('tr:even:not("#thead")').addClass(options.evenRowClass); //_this.find('#thead').removeClass(options.evenRowClass); //oddrow _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); }); }); returnthis; } })(jQuery);
html部分调用插件如下:
();==();==(function(){});==$(document).ready();
等页面加载成功后执行
;$(function(){ $('#table1').table({ //arguments,properties evenRowClass:'evenRow1', oddRowClass:'oddRow1', currentRowClass:'currentRow1' }); });
附上代码:
<!doctypehtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metaname="Generator"content="EditPlus®"> <metaname="Author"content=""> <metaname="Keywords"content=""> <metaname="Description"content=""> <title>Document</title> <style> *{margin:0;padding:0;} table{ border-collapse:collapse; width:100%; border:1pxsolidred; margin-top:50px; text-align:center; } tr,th,td{ height:30px; border:1pxsolidred; } .evenRow1{ background:red; } .oddRow1{ background:orange; } .currentRow1{ background:blue; } #ss{ float:right; margin-right:100px; } #search{ font-size:14px; width:50px; } </style> <scriptsrc="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <scriptsrc="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(){ vartext=$('input[type=text]').val(); $('#table1tr:not("#thead")').hide().filter(':contains("'+text+'")').show(); }); }); </script> <divid="ss"> <inputtype="text"placeholder="请输入查询数据"> <inputid="search"type="button"value="查询"> </div> <tableid="table1"> <trid="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查询功能的简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持毛票票。