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中封装函数传递当前元素的方法示例
May 05 jQuery
jquery实现图片轮播器
May 23 jQuery
jQuery实现返回顶部按钮和scroll滚动功能[带动画效果]
Jul 05 jQuery
jquery实现企业定位式导航效果
Jan 01 jQuery
轻松搞定jQuery+JSONP跨域请求的解决方案
Mar 06 jQuery
jQuery中$原理实例分析
Aug 13 jQuery
简单易扩展可控性强的Jquery转盘抽奖程序
Mar 16 jQuery
jQuery内容选择器与表单选择器实例分析
Jun 28 jQuery
jQuery+PHP+Ajax实现动态数字统计展示功能
Dec 25 jQuery
jQuery模仿ToDoList实现简单的待办事项列表
Dec 30 jQuery
jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较实例分析
Apr 30 jQuery
jQuery 隐藏/显示效果函数用法实例分析
May 20 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
星际争霸中的热键
2020/03/04 星际争霸
php实现scws中文分词搜索的方法
2015/12/25 PHP
PHP后期静态绑定之self::限制实例分析
2018/12/21 PHP
Three.js源码阅读笔记(基础的核心Core对象)
2012/12/27 Javascript
一个支付页面DEMO附截图
2014/07/22 Javascript
jQuery源码分析之jQuery中的循环技巧详解
2014/09/06 Javascript
jQuery中deferred对象使用方法详解
2016/07/14 Javascript
AngularJS equal比较对象实例详解
2016/09/14 Javascript
Angular2安装angular-cli
2017/05/21 Javascript
vue中appear的用法
2017/08/17 Javascript
Javascript中从学习bind到实现bind的过程
2018/01/05 Javascript
详解用场景去理解函数柯里化(入门篇)
2019/04/11 Javascript
python正则表达式去掉数字中的逗号(python正则匹配逗号)
2013/12/25 Python
使用Python下载歌词并嵌入歌曲文件中的实现代码
2015/11/13 Python
小议Python中自定义函数的可变参数的使用及注意点
2016/06/21 Python
python实现上传下载文件功能
2020/11/19 Python
python 非线性规划方式(scipy.optimize.minimize)
2020/02/11 Python
python中如何设置代码自动提示
2020/07/15 Python
amaze ui 的使用详细教程
2020/08/19 HTML / CSS
FOREO斐珞尔官方旗舰店:LUNA露娜洁面仪
2018/03/11 全球购物
施华洛世奇新加坡官网:SWAROVSKI新加坡
2020/10/06 全球购物
教师个人的自我评价分享
2014/01/02 职场文书
小学英语教学反思
2014/01/30 职场文书
2015年元旦文艺汇演主持词
2014/03/26 职场文书
社会调查研究计划书
2014/05/01 职场文书
安全教育月活动总结
2014/05/05 职场文书
商业企业管理专业求职信
2014/07/10 职场文书
个人批评与自我批评
2014/10/15 职场文书
2015年学生会纪检部工作总结
2015/03/31 职场文书
2015年组织委员工作总结
2015/04/23 职场文书
婚姻出轨保证书
2015/05/08 职场文书
考试后的感想
2015/08/07 职场文书
2016三严三实专题教育活动心得体会
2016/01/06 职场文书
2019年大学推荐信
2019/06/24 职场文书
十大最强火系宝可梦,喷火龙上榜,第一名有双火属性
2022/03/18 日漫
Win11快速关闭所有广告推荐
2022/04/19 数码科技