基于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 相关文章推荐
js 获取中文拼音,Select自动匹配字母获取值的代码
Sep 23 Javascript
用Greasemonkey 脚本收藏网站会员信息到本地
Oct 26 Javascript
js 点击按钮弹出另一页,选择值后,返回到当前页
May 26 Javascript
基于jquery的兼容各种浏览器的iframe自适应高度的脚本
Aug 13 Javascript
js中indexof的用法详细解析
Dec 24 Javascript
js利用数组length属性清空和截短数组的小例子
Jan 15 Javascript
js实现字符串的16进制编码不加密
Apr 25 Javascript
[js高手之路]寄生组合式继承的优势详解
Aug 28 Javascript
用JavaScript做简易的购物车的代码示例
Oct 20 Javascript
JavaScript实现全选取消效果
Dec 14 Javascript
JavaScript中的函数申明、函数表达式、箭头函数
Dec 06 Javascript
js 压缩图片的示例(只缩小体积,不更改图片尺寸)
Oct 21 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
PHPCMS的使用小结
2010/09/20 PHP
PHP获取数组中某元素的位置及array_keys函数应用
2013/01/29 PHP
PHP中调用SVN命令更新网站方法
2015/01/07 PHP
PHP实现移除数组中为空或为某值元素的方法
2017/01/07 PHP
PDO::_construct讲解
2019/01/27 PHP
javascript学习笔记(十一) 正则表达式介绍
2012/06/20 Javascript
JavaScript DOM操作表格及样式
2015/04/13 Javascript
网页中JS函数自动执行常用三种方法
2016/03/30 Javascript
require简单实现单页应用程序(SPA)
2016/07/12 Javascript
微信小程序 图片等比例缩放(图片自适应屏幕)
2016/11/16 Javascript
移动端底部导航固定配合vue-router实现组件切换功能
2019/06/13 Javascript
解决layer.confirm快速点击会重复触发事件的问题
2019/09/23 Javascript
用云开发Cloudbase实现小程序多图片内容安全监测的代码详解
2020/06/07 Javascript
Python实现动态添加类的属性或成员函数的解决方法
2014/07/16 Python
Python的装饰器模式与面向切面编程详解
2015/06/21 Python
python 捕获shell脚本的输出结果实例
2017/01/04 Python
开源软件包和环境管理系统Anaconda的安装使用
2017/09/04 Python
200 行python 代码实现 2048 游戏
2018/01/12 Python
python 按不同维度求和,最值,均值的实例
2018/06/28 Python
python抓取需要扫微信登陆页面
2019/04/29 Python
python编程进阶之异常处理用法实例分析
2020/02/21 Python
python json.dumps中文乱码问题解决
2020/04/01 Python
Django Xadmin多对多字段过滤实例
2020/04/07 Python
CSS3关于z-index不生效问题的解决
2020/02/19 HTML / CSS
使用canvas一步步实现图片打码功能的方法
2019/06/17 HTML / CSS
发现世界上最好的珠宝设计师:JewelStreet
2017/12/17 全球购物
Lulu & Georgia官方网站:购买地毯、家具、抱枕、壁纸、床上用品等
2018/03/19 全球购物
如何高效率的查找一个月以内的数据
2012/04/15 面试题
庆中秋节主题活动方案
2014/02/03 职场文书
搞笑婚礼主持词
2014/03/13 职场文书
春节联欢晚会主持词
2014/03/24 职场文书
出纳担保书范文
2014/04/02 职场文书
某集团股份有限公司委托书样本
2014/09/24 职场文书
2015年服务员工作总结
2015/04/08 职场文书
大队委员竞选稿
2015/11/20 职场文书
SpringCloud Alibaba 基本开发框架搭建过程
2021/06/13 Java/Android