jquery插件方式实现table查询功能
Posted double2014
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery插件方式实现table查询功能相关的知识，希望对你有一定的参考价值。
1.写插件部分，如下：
;(function($){
$.fn.plugin = function(options){
var defaults = {
//各种属性，各种参数
}
var options = $.extend(defaults, options);
this.each(function(){
//功能代码
var _this = this;
});
}
})(jQuery);
附上一个例子：
1 ;(function($){ 2 $.fn.table = function(options){ 3 var defaults = { 4 //arguments , properties 5 evenRowClass : ‘evenRow‘, 6 oddRowClass : ‘oddRow‘, 7 currentRowClass : ‘currentRow‘, 8 eventType : ‘mouseover‘, 9 eventType2 : ‘mouseout‘, 10 } 11 var options = $.extend(defaults, options); 12 13 this.each(function(){ 14 15 //function code 16 var _this = $(this); 17 //even row 18 _this.find(‘tr:even:not("#thead")‘).addClass(options.evenRowClass); 19 //_this.find(‘#thead‘).removeClass(options.evenRowClass); 20 // odd row 21 _this.find(‘tr:odd‘).addClass(options.oddRowClass); 22 23 /*_this.find(‘tr‘).mouseover(function(){ 24 $(this).addClass(options.currentRowClass); 25 }).mouseout(function(){ 26 $(this).removeClass(options.currentRowClass); 27 });*/ 28 29 _this.find(‘tr‘).bind(options.eventType, function(){ 30 $(this).addClass(options.currentRowClass); 31 }); 32 33 _this.find(‘tr‘).bind(options.eventType2, function(){ 34 $(this).removeClass(options.currentRowClass); 35 }); 36 37 }); 38 return this; 39 } 40 })(jQuery);
html部分调用插件如下：
$();==$(function(){});==$(document).ready(); 等页面加载成功后执行
;$(function(){
$(‘#table1‘).table({
//arguments , properties
evenRowClass : ‘evenRow1‘,
oddRowClass : ‘oddRow1‘,
currentRowClass : ‘currentRow1‘
});
});
附上代码：
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="Generator" content="EditPlus®"> 6 <meta name="Author" content=""> 7 <meta name="Keywords" content=""> 8 <meta name="Description" content=""> 9 <title>Document</title> 10 <style> 11 *{margin:0; padding:0;} 12 table{ 13 border-collapse:collapse; 14 width:100%; 15 border:1px solid red; 16 margin-top:50px; 17 text-align:center; 18 } 19 20 tr, th, td{ 21 height:30px; 22 border:1px solid red; 23 } 24 .evenRow1{ 25 background:red; 26 } 27 .oddRow1{ 28 background:orange; 29 } 30 .currentRow1{ 31 background:blue; 32 } 33 #ss{ 34 float:right; 35 margin-right:100px; 36 } 37 #search{ 38 font-size:14px; 39 width:50px; 40 } 41 42 </style> 43 <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> 44 <script src="jquery-table-1.0.js"></script> 45 </head> 46 <body> 47 <script> 48 ;$(function(){ 49 $(‘#table1‘).table({ 50 51 //arguments , properties 52 evenRowClass : ‘evenRow1‘, 53 oddRowClass : ‘oddRow1‘, 54 currentRowClass : ‘currentRow1‘ 55 56 }); 57 58 $(‘input[type=button]‘).click(function(){ 59 var text = $(‘input[type=text]‘).val(); 60 $(‘#table1 tr:not("#thead")‘).hide().filter(‘:contains("‘+text+‘")‘).show(); 61 }); 62 63 }); 64 65 </script> 66 67 <div id="ss"> 68 <input type="text" placeholder="请输入查询数据"> 69 <input id="search" type="button" value="查询"> 70 </div> 71 72 <table id="table1"> 73 <tr id="thead"> 74 <th>姓名</th> 75 <th>学号</th> 76 <th>性别</th> 77 <th>年龄</th> 78 79 </tr> 80 <tr> 81 <td>张三</td> 82 <td>1</td> 83 <td>男</td> 84 <td>20</td> 85 </tr> 86 87 <tr> 88 <td>李四</td> 89 <td>2</td> 90 <td>男</td> 91 <td>30</td> 92 </tr> 93 <tr> 94 <td>张三</td> 95 <td>1</td> 96 <td>女</td> 97 <td>20</td> 98 </tr> 99 100 <tr> 101 <td>李四</td> 102 <td>2</td> 103 <td>男</td> 104 <td>30</td> 105 </tr> 106 <tr> 107 <td>王五</td> 108 <td>3</td> 109 <td>男</td> 110 <td>30</td> 111 </tr> 112 <tr> 113 <td>王五</td> 114 <td>3</td> 115 <td>男</td> 116 <td>30</td> 117 </tr> 118 <tr> 119 <td>张三</td> 120 <td>1</td> 121 <td>女</td> 122 <td>20</td> 123 </tr> 124 125 <tr> 126 <td>李四</td> 127 <td>2</td> 128 <td>男</td> 129 <td>30</td> 130 </tr> 131 132 </table> 133 </body> 134 </html>
通过这个例子学到了jquery 对象级插件开发
以上是关于jquery插件方式实现table查询功能的主要内容，如果未能解决你的问题，请参考以下文章