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 相关文章推荐
JsEasy简介 JsEasy是什么?与下载
Mar 07 Javascript
JavaScript OOP类与继承
Nov 15 Javascript
javascript对话框使用方法(警告框 javascript确认框 提示框)
Jan 07 Javascript
jQuery实现返回顶部功能适合不支持js的浏览器
Aug 19 Javascript
Javascript 中创建自定义对象的方法汇总
Dec 04 Javascript
jQuery实现网站添加高亮突出显示效果的方法
Jun 26 Javascript
js实现当鼠标移到表格上时显示这一格全部内容的代码
Jun 12 Javascript
Jquery和Js获得元素标签名称的方法总结
Oct 08 Javascript
如何正确理解javascript的模块化
Mar 02 Javascript
vue登录路由验证的实现
Dec 13 Javascript
JavaScript实现封闭区域布尔运算的示例代码
Jun 25 Javascript
vue+elementUI动态生成面包屑导航教程
Nov 04 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
一键删除顽固的空文件夹 软件下载
2007/01/26 PHP
用php制作简单分页(从数据库读取记录)的方法详解
2013/05/04 PHP
PHP简单选择排序算法实例
2015/01/26 PHP
php通过array_merge()函数合并关联和非关联数组的方法
2015/03/18 PHP
laravel多条件查询方法(and,or嵌套查询)
2019/10/09 PHP
javascript cookies 设置、读取、删除实例代码
2010/04/12 Javascript
js中浮点型运算BUG的解决方法说明
2014/01/06 Javascript
jQuery的animate函数学习记录
2014/08/08 Javascript
JavaScript父子窗体间的调用方法
2015/03/31 Javascript
jQuery实现限制textarea文本框输入字符数量的方法
2015/05/28 Javascript
深入理解JavaScript的React框架的原理
2015/07/02 Javascript
js判断手机端(Android手机还是iPhone手机)
2015/07/22 Javascript
基于HTML+CSS,jQuery编写的简易计算器后续(添加了键盘监听)
2016/01/05 Javascript
jQuery EasyUI Tab 选项卡问题小结
2016/08/16 Javascript
JavaScript数据结构中串的表示与应用实例
2017/04/12 Javascript
Angular通过angular-cli来搭建web前端项目的方法
2017/07/27 Javascript
jquery+css实现简单的图片轮播效果
2017/08/07 jQuery
JavaScript模块模式实例详解
2017/10/25 Javascript
vue slots 组件的组合/分发实例
2018/09/06 Javascript
小程序中的箭头函数的具体使用
2020/06/19 Javascript
基于 Vue 的 Electron 项目搭建过程图文详解
2020/07/22 Javascript
javascript实现时间日期的格式化的方法汇总
2020/08/06 Javascript
使用Python编写基于DHT协议的BT资源爬虫
2016/03/19 Python
Python爬取数据保存为Json格式的代码示例
2019/04/09 Python
屏蔽Django admin界面添加按钮的操作
2020/03/11 Python
解决django的template中如果无法引用MEDIA_URL问题
2020/04/07 Python
Python3.7将普通图片(png)转换为SVG图片格式(网站logo图标)动起来
2020/04/21 Python
Python读写压缩文件的方法
2020/07/30 Python
Python 列表推导式需要注意的地方
2020/10/23 Python
CSS3的文字阴影—text-shadow的使用方法
2012/12/25 HTML / CSS
PREMIUM-MALL法国:行李、箱包及配件在线
2019/05/30 全球购物
Sisley法国希思黎中国官网:享誉全球的奢华植物美容品牌
2019/06/30 全球购物
Lentiamo丹麦:购买便宜的隐形眼镜
2021/01/13 全球购物
《中国梦我的梦》小学生演讲稿
2014/08/20 职场文书
销售助理岗位职责
2015/02/11 职场文书
2019年特色火锅店的创业计划书模板
2019/08/28 职场文书