基于jQuery实现页面搜索功能
发布于 2017-03-25 02:15:03 | 162 次阅读 | 评论: 0 | 来源: 网友投递
jQuery javascript框架
jQuery是一个兼容多浏览器的javascript框架，核心理念是write less,do more(写得更少,做得更多)。jQuery在2006年1月由美国人John Resig在纽约的barcamp发布，吸引了来自世界各地的众多JavaScript高手加入，由Dave Methvin率领团队进行开发。
这篇文章主要为大家详细介绍了基于jQuery实现页面搜索功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
jQuery实现页面搜索，搜索筛选用户输入的内容！
HTML:
<div class="table">
<table>
<tr id="theader">
<th>姓名</th>
<th>性别</th>
<th>联系方式</th>
</tr>
<tr>
<td>客服</td>
<td>女</td>
<td>161654466</td>
</tr>
<tr>
<td>掌柜</td>
<td>男</td>
<td>37398378737</td>
</tr>
<tr>
<td>小二</td>
<td>男</td>
<td>37398378737</td>
</tr>
<tr>
<td>小三</td>
<td>女</td>
<td>3464653537</td>
</tr>
<tr>
<td>小四</td>
<td>女</td>
<td>37398378737</td>
</tr>
</table>
<input type="text"></input>
<input type="button" value="搜索"></input>
</div>
JQ:
$(function(){
$("input[type=button]").click(function(){
var txt=$("input[type=text]").val();
if($.trim(txt)!=""){
$("table tr:not('#theader')").hide().filter(":contains('"+txt+"')").show().css("background","red");
}else{
$("table tr:not('#theader')").css("background","#fff").show();
}
});
})
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持phperz。
推荐阅读
最新资讯