基于jQuery实现页面搜索功能


Posted in Javascript onMarch 26, 2020

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搜索功能汇总 进行学习

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
datePicker——日期选择控件(with jquery)
Feb 20 Javascript
Javascript 命名空间模式
Nov 01 Javascript
Yii2使用Bootbox插件实现自定义弹窗
Apr 02 Javascript
ajax+jQuery实现级联显示地址的方法
May 06 Javascript
jquery控制显示服务器生成的图片流
Aug 04 Javascript
20分钟轻松创建自己的Bootstrap站点
May 12 Javascript
JS使用插件cryptojs进行加密解密数据实例
May 11 Javascript
利用node实现一个批量重命名文件的函数
Dec 21 Javascript
浅谈React + Webpack 构建打包优化
Jan 23 Javascript
深入理解Promise.all
Aug 08 Javascript
微信小程序tabBar 返回tabBar不刷新页面
Jul 25 Javascript
在 Vue 中编写 SVG 图标组件的方法
Feb 24 Javascript
JS中的数组方法笔记整理
Jul 26 #Javascript
jQuery实现日期联动效果实例
Jul 26 #Javascript
一种基于浏览器的自动小票机打印实现方案(js版)
Jul 26 #Javascript
深入理解JavaScript函数参数(推荐)
Jul 26 #Javascript
JavaScript从0开始构思表情插件
Jul 26 #Javascript
只需五句话搞定JavaScript作用域(经典)
Jul 26 #Javascript
第一次接触神奇的Bootstrap基础排版
Jul 26 #Javascript
You might like
PHP中上传大体积文件时需要的设置
2006/10/09 PHP
在Windows下编译适用于PHP 5.2.12及5.2.13的eAccelerator.dll(附下载)
2010/05/04 PHP
从ThinkPHP3.2.3过渡到ThinkPHP5.0学习笔记图文详解
2019/04/03 PHP
DOM下的节点属性和操作小结
2009/05/14 Javascript
jQuery的实现原理的模拟代码 -5 Ajax
2010/08/07 Javascript
function foo的原型与prototype属性解惑
2010/11/19 Javascript
jquery制作弹窗提示窗口代码分享
2014/03/02 Javascript
JavaScript中的包装对象介绍
2015/01/27 Javascript
jquery中$each()方法的使用指南
2015/04/30 Javascript
jquery实现可关闭的倒计时广告特效代码
2015/09/02 Javascript
理解Javascript图片预加载
2016/02/23 Javascript
15个值得开发人员关注的jQuery开发技巧和心得总结【经典收藏】
2016/05/25 Javascript
纯javascript版日历控件
2016/11/24 Javascript
深入理解Angularjs中的$resource服务
2016/12/31 Javascript
详解Vue2.0之去掉组件click事件的native修饰
2017/04/20 Javascript
微信小程序实现自定义modal弹窗封装的方法
2018/06/15 Javascript
JavaScript或jQuery 获取option value值方法解析
2020/05/12 jQuery
Vue watch响应数据实现方法解析
2020/07/10 Javascript
[01:10]3.19DOTA2发布会 三代刀塔人第一代
2014/03/25 DOTA
[07:26]2015国际邀请赛第二日TOP10集锦
2015/08/06 DOTA
[00:12]2018DOTA2亚洲邀请赛SOLO赛 MidOne是否中单第一人?
2018/04/05 DOTA
Python网络编程之TCP与UDP协议套接字用法示例
2018/02/02 Python
python中copy()与deepcopy()的区别小结
2018/08/03 Python
Python发展史及网络爬虫
2019/06/19 Python
Python定时任务随机时间执行的实现方法
2019/08/14 Python
美国现代家具和家居商店:Apt2B
2016/08/29 全球购物
欧洲最大的高尔夫零售商:American Golf
2019/09/02 全球购物
小区门卫岗位职责
2013/12/31 职场文书
关于元旦的广播稿
2014/02/16 职场文书
搞笑的爱情检讨书
2014/10/01 职场文书
学生上课迟到检讨书
2015/01/01 职场文书
2015年度党风廉政建设工作情况汇报
2015/01/02 职场文书
综合素质评价个性与发展自我评价
2015/03/06 职场文书
2016大学生诚信考试承诺书
2016/03/25 职场文书
解决pytorch-gpu 安装失败的记录
2021/05/24 Python
win10+RTX3050ti+TensorFlow+cudn+cudnn配置深度学习环境的方法
2022/06/25 Servers