JavaScript前端页面搜索功能案例【基于jQuery】


Posted in jQuery onJuly 10, 2019

本文实例讲述了JavaScript前端页面搜索功能。分享给大家供大家参考,具体如下:

今天给大家分享一篇关于前端页面搜索的案例,有了这个案例,在表格数据中可以进行快速查找,比在浏览器中使用ctrl+F体验比较好。

效果图:

JavaScript前端页面搜索功能案例【基于jQuery】

代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>页面搜索实例</title>
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <style>
    table{
      width:400px;
      border:1px solid blue;
      border-collapse: collapse;
    }
    table th{
      height:30px;
      border:1px solid blue;
      text-align: center;
    }
    table td{
      height:30px;
      border:1px solid blue;
      text-align: center;
    }
  </style>
</head>
<body>
  <table>
    <tr>
      <th>姓名</th>
      <th>性别</th>
      <th>电话</th>
    </tr>
    <tr>
      <td>张三</td>
      <td>男</td>
      <td>13111112222</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>男</td>
      <td>13233334444</td>
    </tr>
    <tr>
      <td>移动充值</td>
      <td>女</td>
      <td>10086</td>
    </tr>
    <tr>
      <td>联通充值</td>
      <td>女</td>
      <td>10010</td>
    </tr>
  </table>
  <div style="width:100%;height:20px"></div>
  <div>
    <input type="text" name="" id="">
    <input type="button" value="搜索">
  </div>
</body>
<script>
  $('input[type=button]').click(function(){
    var text = $('input[type=text]').val();
    $('table tr').not(':first').hide().filter(':contains("'+text+'")').show();
  });
</script>
</html>

代码比较简单,首先给button按钮添加单击事件,然后获取文本框中的内容,再从表格中tr进行查找,首先把表头的tr过滤掉,然后把其他的tr全部隐藏掉,然后按照内容进行过滤,把过滤出来的行显示出来。

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

注:另外,本站如下几款在线工具也具有前端页面搜索功能,且功能更加强大:

php在线函数参考表:
http://tools.3water.com/table/php_fun_table

全国少数民族分布在线查询工具:
http://tools.3water.com/bianmin/minzufenbu

世界节日在线查询工具:
http://tools.3water.com/bianmin/jieri

世界各国区号代码及时差查询表:
http://tools.3water.com/bianmin/shicha

世界各国/地区货币查询表:
http://tools.3water.com/bianmin/huobi

世界各国首都查询表:
http://tools.3water.com/bianmin/shoudu

更多关于jQuery相关内容可查看本站专题:《jQuery页面元素操作技巧汇总》、《jQuery常见事件用法与技巧总结》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jquery实现tab键进行选择后enter键触发click行为
Mar 29 jQuery
jquery实现简单实用的轮播器
May 23 jQuery
解决jQuery ajax动态新增节点无法触发点击事件的问题
May 24 jQuery
jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码
Aug 23 jQuery
jQuery选择器之属性过滤选择器详解
Sep 28 jQuery
jQuery实现的form转json经典示例
Oct 10 jQuery
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
Jul 03 jQuery
jQuery zTree树插件的使用教程
Aug 16 jQuery
jQuery实现每日秒杀商品倒计时功能
Sep 06 jQuery
jquery更改元素属性attr()方法操作示例
May 22 jQuery
基于JavaScript或jQuery实现网站夜间/高亮模式
May 30 jQuery
jquery实现广告上下滚动效果
Mar 04 jQuery
jquery多级树形下拉菜单的实例代码
Jul 09 #jQuery
jQuery删除/清空指定元素的所有子节点实例代码
Jul 04 #jQuery
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
Jul 03 #jQuery
jQuery属性选择器用法实例分析
Jun 28 #jQuery
jQuery位置选择器用法实例分析
Jun 28 #jQuery
jQuery层叠选择器用法实例分析
Jun 28 #jQuery
jQuery内容选择器与表单选择器实例分析
Jun 28 #jQuery
You might like
smarty section简介与用法分析
2008/10/03 PHP
PHP ajax+jQuery 实现批量删除功能实例代码小结
2018/12/06 PHP
PHP7引入的&quot;??&quot;和&quot;?:&quot;的区别讲解
2019/04/08 PHP
使用tp框架和SQL语句查询数据表中的某字段包含某值
2019/10/18 PHP
七种PHP开发环境搭建工具
2020/06/28 PHP
javascript据option的value值快速设定初始的selected选项
2007/08/13 Javascript
国外的为初学者写的JavaScript教程
2008/06/09 Javascript
JQuery模板插件 jquery.tmpl 动态ajax扩展
2011/11/10 Javascript
ajax不执行success回调而是执行了error回调
2012/12/10 Javascript
js获取控件位置以及不同浏览器中的差别介绍
2013/08/08 Javascript
JavaScript中的对象与JSON
2015/07/03 Javascript
深入解析JavaScript编程中的this关键字使用
2015/11/09 Javascript
学习JavaScript设计模式之装饰者模式
2016/01/19 Javascript
获取input标签的所有属性的方法
2016/06/28 Javascript
将json转换成struts参数的方法
2016/11/08 Javascript
原生js实现贪吃蛇游戏
2020/10/26 Javascript
利用Python自带PIL库扩展图片大小给图片加文字描述的方法示例
2017/08/08 Python
Python+树莓派+YOLO打造一款人工智能照相机
2018/01/02 Python
用Python抢火车票的简单小程序实现解析
2019/08/14 Python
Python实现加密的RAR文件解压的方法(密码已知)
2020/09/11 Python
使用django自带的user做外键的方法
2020/11/30 Python
CSS3实现任意图片lowpoly动画效果实例
2017/05/11 HTML / CSS
护理自荐信范文
2013/10/05 职场文书
市场营销专业毕业生自荐信
2013/11/02 职场文书
汽车专业毕业生自荐信
2013/11/03 职场文书
教你打造完美的创业计划书
2014/01/06 职场文书
优秀士兵先进事迹
2014/02/06 职场文书
2014年健康教育实施方案
2014/02/17 职场文书
《月迹》教学反思
2014/02/19 职场文书
《锄禾》教学反思
2014/04/08 职场文书
小学先进集体事迹材料
2014/05/31 职场文书
颂军魂爱军营演讲稿
2014/09/13 职场文书
2015国庆节66周年演讲稿
2015/03/20 职场文书
蜗居观后感
2015/06/11 职场文书
未婚证明格式
2015/06/15 职场文书
redis数据结构之压缩列表
2022/03/21 Redis