脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jQuery页面搜索

基于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简单实现title提示效果示例

    jQuery简单实现title提示效果示例

    这篇文章主要介绍了jQuery简单实现title提示效果的方法,结合实例形式分析了jQuery封装与使用title提示框的方法,需要的朋友可以参考下
    2016-08-08
  • JQuery模板插件 jquery.tmpl 动态ajax扩展

    JQuery模板插件 jquery.tmpl 动态ajax扩展

    在上一篇JQuery模板插件-jquery.tmpl中介绍了这款插件。有时我们需要去动态的ajax去加载模板，或者数据，根据url参数或者其他信息加载不同的模板，数据
    2011-11-11
  • DIV外区域Click后关闭DIV的实现代码

    DIV外区域Click后关闭DIV的实现代码

    首先看下JS的事件模型，JS事件模型为向上冒泡，如onclick事件在某一DOM元素被触发后，事件将跟随节点向上传播，直到有click事件绑定在某一父节点上，如果没有将直至文档的根
    2011-12-12
  • jQuery 淡出一个图像到另一个图像的实现代码

    jQuery 淡出一个图像到另一个图像的实现代码

    这篇文章主要介绍了jquery的hover事件实现两个图片的淡出切换效果，需要的朋友可以参考下
    2013-06-06
  • Jquery attr("checked") 返回checked或undefined 获取选中失效

    Jquery attr("checked") 返回checked或undefined 获取选中失效

    $('#cb').attr('checked'); 返回的是checked或者是undefined，不是原来的true和false了，有关此问题的解决方法如下，感兴趣的朋友可以参考下
    2013-10-10
  • jQuery中parents()的使用说明

    jQuery中parents()的使用说明

    今天遇到一个有意思的问题，jquery有两个函数parent()和parents().通过这两个函数可以找到一个对象的父对象，又称作jquery的选择器。
    2010-11-11
  • jquery easyui validatebox remote的使用详解

    jquery easyui validatebox remote的使用详解

    下面小编就为大家带来一篇jquery easyui validatebox remote的使用详解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11
  • 使用Jquery获取Thymeleaf参数的三种方式小结

    使用Jquery获取Thymeleaf参数的三种方式小结

    在使用Thymeleaf进行数据填充的时候,发现使用jquery原始方式获取内容参数发现拿不到数据,本文主要介绍了使用Jquery获取Thymeleaf参数的三种方式小结,感兴趣的可以了解一下
    2024-07-07
  • 简单实现jQuery弹窗效果

    简单实现jQuery弹窗效果

    这篇文章主要教大家简单实现jQuery弹窗效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-10-10
  • jQuery居中元素scrollleft计算方法示例

    jQuery居中元素scrollleft计算方法示例

    这篇文章主要介绍了jQuery居中元素scrollleft计算方法,结合实例形式分析了jQuery获取及计算页面滚动元素的相关操作技巧,需要的朋友可以参考下
    2017-01-01

最新评论