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