javascript实现简单搜索功能


Posted in Javascript onMarch 26, 2020

本文实例为大家分享了javascript实现简单搜索功能的具体代码,供大家参考,具体内容如下

<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>New Web Project</title>
 <style>
 table{
 
 width: 500px;
 }
 td{
 border:1px solid #ccc;
 padding:5px;
 }
 </style>
 <script>
 window.οnlοad=function(){
 var oTb=document.getElementById('tb');
 var oldColor=null;
 var tName=document.getElementById('name');
 var oBtn=document.getElementById('btn');
 oBtn.οnclick=function(){
  var aRows=oTb.tBodies[0].rows;
  for(var i=0;i<aRows.length;i++)
  {
  var tdValue=aRows[i].cells[1].innerHTML.toLowerCase();
  var tNameValue=tName.value.toLowerCase().split(' ');
  for(var j=0;j<tNameValue.length;j++)
  {
  if(tdValue.search(tNameValue[j])>=0)
  {
  aRows[i].style.background='green';
  break;
  }
  else{
  aRows[i].style.background='';
  }
  }
  
  }
 };

 };
 </script>
 </head>
 <body>
 姓名:<input id='name' type="text"/>
 <input id="btn" type="button" value="搜索" />
 <table id="tb">
 <thead>
 <tr>
  <td>ID</td>
  <td>姓名</td>
  <td>年龄</td>
 </tr>
 </thead>
 <tbody>
 <tr>
  <td>1</td>
  <td>Blue</td>
  <td>23</td>
 </tr>
 <tr>
  <td>2</td>
  <td>李四</td>
  <td>26</td>
 </tr>
 <tr>
  <td>3</td>
  <td>王五</td>
  <td>29</td>
 </tr>
 <tr>
  <td>4</td>
  <td>青天决</td>
  <td>28</td>
 </tr>
 <tr>
  <td>5</td>
  <td>赵少邦</td>
  <td>23</td>
 </tr>
 </tbody>
 </table>
 </body>
</html>

注意事项:

A.search(B)可以在A中搜索B的位置,返回B出现的位置
A.split(B)将A以B划分为几部分,并返回数组,相当于分词操作

运行结果如下:

javascript实现简单搜索功能

更多搜索功能实现的精彩文章,请点击专题:javascript搜索功能汇总 进行学习

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

Javascript 相关文章推荐
javascript 放大镜效果js组件 qsoft.PopBigImage.v0.35 加入了chrome支持
Apr 07 Javascript
javascript 对象比较实现代码
Apr 27 Javascript
JavaScript 面向对象的 私有成员和公开成员
May 13 Javascript
Ajax异步提交表单数据的说明及方法实例
Jun 22 Javascript
javaScript实现浮点数转十六进制字符
Oct 29 Javascript
node.js中的fs.readSync方法使用说明
Dec 17 Javascript
解决WordPress使用CDN后博文无法评论的错误
Dec 15 Javascript
JavaScript代码实现左右上下自动晃动自动移动
Apr 08 Javascript
Vue实现路由跳转和嵌套
Jun 20 Javascript
node.js微信小程序配置消息推送的实现
Feb 13 Javascript
vue 监听 Treeselect 选择项的改变操作
Aug 31 Javascript
详解Js模块化的作用原理和方案
Apr 29 Javascript
jQuery实现html可联动的百分比进度条
Mar 26 #jQuery
vue+element 实现商城主题开发的示例代码
Mar 26 #Javascript
js实现带箭头的进度流程
Mar 26 #Javascript
Bootstrap实现前端登录页面带验证码功能完整示例
Mar 26 #Javascript
jquery css实现流程进度条
Mar 26 #jQuery
jquery实现上传文件进度条
Mar 26 #jQuery
jquery实现进度条状态展示
Mar 26 #jQuery
You might like
php中iconv函数使用方法
2008/05/24 PHP
利用php实现禁用IE和火狐的缓存问题
2012/12/03 PHP
PHP魔术方法的使用示例
2015/06/23 PHP
关于javascript中的typeof和instanceof介绍
2012/12/04 Javascript
浅谈toLowerCase和toLocaleLowerCase的区别
2016/08/15 Javascript
jQuery插件zTree实现的基本树与节点获取操作示例
2017/03/08 Javascript
jquery 输入框查找关键字并提亮颜色的实例代码
2018/01/23 jQuery
从零开始搭建一个react项目开发
2018/02/09 Javascript
[04:37]DOTA2英雄梦之声Vol20发条
2014/06/20 DOTA
简单介绍Python中的JSON模块
2015/04/08 Python
Python连接PostgreSQL数据库的方法
2016/11/28 Python
对Python中列表和数组的赋值,浅拷贝和深拷贝的实例讲解
2018/06/28 Python
django 实现编写控制登录和访问权限控制的中间件方法
2019/01/15 Python
Python编程中类与类的关系详解
2019/08/08 Python
基于python二叉树的构造和打印例子
2019/08/09 Python
使用pandas实现筛选出指定列值所对应的行
2020/12/13 Python
python 30行代码实现蚂蚁森林自动偷能量
2021/02/08 Python
使用HTML5的File实现base64和图片的互转
2013/08/01 HTML / CSS
美国经典刺绣和字母儿童服装特卖:Smocked Auctions
2018/07/16 全球购物
美国购买肉、鸭、家禽、鹅肝和熟食网站:D’Artagnan
2018/11/13 全球购物
Currentbody澳大利亚:美容仪专家
2019/11/11 全球购物
商务英语毕业生自荐信范文
2013/11/08 职场文书
社区工作者思想汇报
2014/01/13 职场文书
青年文明号事迹材料
2014/01/18 职场文书
高等教育学自荐书范文
2014/02/10 职场文书
银行委托书范本
2014/04/04 职场文书
《宿建德江》教学反思
2014/04/23 职场文书
法律专业大学生职业生涯规划书:向目标一步步迈进
2014/09/22 职场文书
教师三严三实对照检查材料
2014/09/25 职场文书
顶岗实习协议书
2015/01/29 职场文书
公路施工安全责任书
2015/05/08 职场文书
毕业酒会致辞
2015/07/29 职场文书
军训心得体会范文(2016最新篇)
2016/01/11 职场文书
MySQL系列之十一 日志记录
2021/07/02 MySQL
WinServer2012搭建DNS服务器的方法步骤
2022/06/10 Servers
安装harbor作为docker镜像仓库的问题
2022/06/14 Servers