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 相关文章推荐
解决使用attachEvent函数时,this指向被绑定的元素的问题的方法
Aug 13 Javascript
FormValid0.5版本发布,带ajax自定义验证例子
Aug 17 Javascript
取选中的radio的值
Jan 11 Javascript
利用腾讯的ip地址库做ip物理地址定位
Jul 24 Javascript
confirm的用法示例用于按钮操作时确定是否执行
Jun 19 Javascript
jquery操作复选框checkbox的方法汇总
Feb 05 Javascript
JavaScript让Textarea支持tab按键的方法
Jun 26 Javascript
AngularJS 日期格式化详解
Dec 23 Javascript
canvas绘制多边形
Feb 24 Javascript
Vue.js轮播图走马灯代码实例(全)
May 08 Javascript
JavaScript变量作用域及内存问题实例分析
Jun 10 Javascript
JQuery实现简单的复选框树形结构图示例【附源码下载】
Jul 16 jQuery
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 命令行工具 shell_exec, exec, passthru, system详细使用介绍
2011/09/11 PHP
thinkphp框架实现删除和批量删除
2016/06/29 PHP
PHP defined()函数的使用图文详解
2019/07/20 PHP
网页里控制图片大小的相关代码
2006/06/25 Javascript
JavaScript 中的事件教程
2007/04/05 Javascript
Prototype PeriodicalExecuter对象 学习
2009/07/19 Javascript
jQuery技巧总结
2011/01/01 Javascript
js中的preventDefault与stopPropagation详解
2014/01/29 Javascript
jQuery实现仿腾讯微博滑出效果报告每日天气的方法
2015/05/11 Javascript
JS实现点击上移下移LI行数据的方法
2015/08/05 Javascript
localResizeIMG先压缩后使用ajax无刷新上传(移动端)
2015/08/11 Javascript
js实现新年倒计时效果
2015/12/10 Javascript
JS动态计算移动端rem的解决方案
2016/10/14 Javascript
JS验证不重复验证码
2017/02/10 Javascript
js实现移动端轮播图效果
2020/12/09 Javascript
Windows下支持自动更新的Electron应用脚手架的方法
2018/12/24 Javascript
使用vue实现各类弹出框组件
2019/07/03 Javascript
layui自己添加图片按钮并点击跳转页面的例子
2019/09/14 Javascript
Vue前端项目部署IIS的实现
2020/01/06 Javascript
vue 页面回退mounted函数不执行的解决方案
2020/07/26 Javascript
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
2021/01/22 Vue.js
Python 学习笔记
2008/12/27 Python
从Python的源码浅要剖析Python的内存管理
2015/04/16 Python
Python实现的RSS阅读器实例
2015/07/25 Python
Django rest framework工具包简单用法示例
2018/07/20 Python
tensorflow 中对数组元素的操作方法
2018/07/27 Python
Python 3 使用Pillow生成漂亮的分形树图片
2019/12/24 Python
PyTorch的torch.cat用法
2020/06/28 Python
python中的垃圾回收(GC)机制
2020/09/21 Python
Python 创建守护进程的示例
2020/09/29 Python
财务经理岗位职责
2013/11/09 职场文书
成品仓库管理员岗位职责
2015/04/09 职场文书
会议简报格式范文
2015/07/20 职场文书
环保主题班会教案
2015/08/13 职场文书
GoLang中生成UUID唯一标识的实现
2021/05/08 Golang
pytorch 如何使用amp进行混合精度训练
2021/05/24 Python