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实现Select下拉列表进行状态选择功能
Mar 30 jQuery
jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】
Aug 18 jQuery
jQuery EasyUI Layout实现tabs标签的实例
Sep 26 jQuery
jquery ajaxfileupload异步上传插件
Nov 21 jQuery
jquery 获取索引值在一定范围的列表方法
Jan 25 jQuery
jQuery 改变P标签文本值方法
Feb 24 jQuery
jquery实现的简单轮播图功能【适合新手】
Aug 17 jQuery
jQuery实现的简单日历组件定义与用法示例
Dec 24 jQuery
jquery无缝图片轮播组件封装
Nov 25 jQuery
JQuery复选框全选效果如何实现
May 08 jQuery
jQuery实现异步上传一个或多个文件
Aug 17 jQuery
jquery实现异步文件上传ajaxfileupload.js
Oct 23 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
php+oracle 分页类
2006/10/09 PHP
php checkdate、getdate等日期时间函数操作详解
2010/03/11 PHP
PHP序列号生成函数和字符串替换函数代码
2012/06/07 PHP
php中simplexml_load_file函数用法实例
2014/11/12 PHP
PHP7 mongoDB扩展使用的方法分享
2019/05/02 PHP
JavaScript窗口功能指南之在窗口中书写内容
2006/07/21 Javascript
JavaScript 图片预览效果 推荐
2009/12/22 Javascript
js href的用法
2010/05/13 Javascript
Confirmer JQuery确认对话框组件
2010/06/09 Javascript
jQuery1.3.2 升级到jQuery1.4.4需要修改的地方
2011/01/06 Javascript
javascript数字时钟示例分享
2014/04/23 Javascript
javascript定义变量时有var和没有var的区别探讨
2014/07/21 Javascript
jQuery Ajax中的事件详细介绍
2015/04/16 Javascript
javascript中使用正则表达式清理table样式的代码
2020/04/01 Javascript
chrome浏览器当表单自动填充时如何去除浏览器自动添加的默认样式
2015/10/09 Javascript
使用jQuery在移动页面上添加按钮和给按钮添加图标
2015/12/04 Javascript
基于AngularJs + Bootstrap + AngularStrap相结合实现省市区联动代码
2016/05/30 Javascript
基于Bootstrap的Metronic框架实现条码和二维码的生成及打印处理操作
2016/08/29 Javascript
JS获取本周周一,周末及获取任意时间的周一周末功能示例
2017/02/09 Javascript
使用JS实现导航切换时高亮显示的示例讲解
2018/08/22 Javascript
详解easyui 切换主题皮肤
2019/04/04 Javascript
layui 弹出层值回传解决方式
2019/11/14 Javascript
[02:36]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Magma 选手采访
2021/03/11 DOTA
用实例详解Python中的Django框架中prefetch_related()函数对数据库查询的优化
2015/04/01 Python
Python解决抛小球问题 求小球下落经历的距离之和示例
2018/02/01 Python
Django中自定义模型管理器(Manager)及方法
2019/09/23 Python
python绘制趋势图的示例
2020/09/17 Python
HTML5 用动画的表现形式装载图像
2016/03/08 HTML / CSS
Myprotein丹麦官网:欧洲第一运动营养品牌
2019/04/15 全球购物
Web Service面试题:如何搭建Axis2的开发环境
2012/06/20 面试题
Hashtable 添加内容的方式有哪几种,有什么区别?
2012/04/08 面试题
机械制造与自动化应届生求职信
2013/11/16 职场文书
妇产医师自荐信
2014/01/29 职场文书
医院反腐倡廉演讲稿
2014/09/16 职场文书
质量负责人岗位职责
2015/02/15 职场文书
从QQtabBar看css命名规范BEM的详细介绍
2021/08/07 HTML / CSS