基于jQuery实现页面搜索功能

更新时间：2020年03月26日 17:05:03 作者：macanfa

这篇文章主要为大家详细介绍了基于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();
   }
  });
 })

更多搜索功能实现的精彩文章，请点击专题：javascript搜索功能汇总进行学习

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果
这篇文章主要介绍了jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果,实例分析了tytabs.jquery.min.js插件实现tab选项卡切换效果的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-08-08
JavaScript与JQUERY获取元素的宽、高和位置
文章给大家汇总整理了JavaScript以及jQuery获取元素高宽和位置等信息的方法，非常的全面，小伙伴们可以记录下以便查看
2017-02-02
jQuery获取URL请求参数的方法
这篇文章主要介绍了jQuery获取URL请求参数的方法,涉及jquery针对URL的获取与字符串的操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-07-07
jQuery中next()方法用法实例
这篇文章主要介绍了jQuery中next()方法用法,实例分析了next()方法的功能、定义及获得匹配元素集合中每个元素紧邻的同辈元素使用技巧,需要的朋友可以参考下
2015-01-01
jquery二级导航内容均分的原理及实现
头部导航二级导航有些内容太长，一列的话太过难看，就要分成两列，要做到按块尽量均分，排列顺序没有限制
2013-08-08
$.extend 的一个小问题
本文给大家记录的是个人在使用$.extend 的时候遇到的一个小问题，以及原因分析和解决方案，十分的实用，有需要的小伙伴可以参考下。
2015-06-06
jQuery学习笔记操作jQuery对象 CSS处理
在对class属性的操作中，实际上已经改变元素样式了，但这些都是根据已设定的CSS规则间接生效的。因此我们有必要使用更为直接的方式来改变原先设定好了的CSS规则
2012-09-09
jQuery学习笔记之jQuery+CSS3的浏览器兼容性
这篇文章主要介绍了jQuery学习笔记之jQuery+CSS3的浏览器兼容性的相关资料,需要的朋友可以参考下
2015-01-01
Jquery幻灯片特效代码分享打开页面随机选择切换方式（3）
jQuery是一个非常优秀的 JavaScript 框架，使用简单灵活，一个漂亮的幻灯片更能吸引访客的注意力。本文实例讲述了jQuery实现时尚漂亮的幻灯片特效，基本能满足你在网页上使用幻灯片(焦点图)效果。分享给大家供大家参考。具体如下：
2015-08-08
jQuery实现动态加载瀑布流
这篇文章主要为大家详细介绍了jQuery实现动态加载瀑布流，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-09-09

基于jQuery实现页面搜索功能

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具