模拟搜索需要实现以下功能：

　　1、用户的模糊搜索不区分大小写，需要小写字母匹配同样可以匹配到该字母的大写单词。

　　2、多关键词模糊搜索，假设用户关键词以空格分隔，在关键词不完整的情况下仍然可以匹配到包含该关键字的表格。

　　3、表格筛选，符合条件的表格展现，不符合条件的表格隐藏。

<!doctype html>

<html>

<head>

<title>表格搜索</title>

<meta charset="utf-8">

<style>

html{font-family:楷体;}

</style>

</head>

<body>

姓名：<input id='name' type='text'/>

<input id='btn1' type='button' value='搜索'/>

<table id='tab1'  border="1" width="500" >

    <thead>

        <tr><td>ID</td><td>姓名</td><td>年龄</td></tr>

    </thead>

    <tbody>

        <tr><td>1</td><td>阿童木</td><td>30</td></tr>

        <tr><td>2</td><td>机器猫</td><td>44</td></tr>

        <tr><td>3</td><td>小叮当</td><td>53</td></tr>

        <tr><td>4</td><td>海雅</td><td>69</td></tr>

        <tr><td>5</td><td>祖鲁</td><td>27</td></tr>

        <tr><td>6</td><td>JavaScript权威指南</td><td>28</td></tr>

    </tbody>

</table>

</body>

</html>

　　【1、用户的模糊搜索不区分大小写，需要小写字母匹配同样可以匹配到该字母的大写单词。】思路：由于JS区分大小写，需要将用户输入值与表格中的innerHTML值均转换为小写形式，再进行匹配，实现模糊匹配效果。函数toLowerCase()把字符串转换为小写。

　　JavaScript代码：

window.onload=function()

{

    var oTab=document.getElementById('tab1');

    var oTxt=document.getElementById('name');

    var oBtn=document.getElementById('btn1');

    oBtn.onclick=function()

    {

        for(var i=0;i<oTab.tBodies[0].rows.length;i++)

        {

            oTab.tBodies[0].rows[i].style.display='none';

            if(oTxt.value.toLowerCase()==oTab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase())

            {

                oTab.tBodies[0].rows[i].style.display='block';

            }

        }

    }

};

　　【2、多关键词模糊搜索，假设用户关键词以空格分隔，在关键词不完整的情况下仍然可以匹配到包含该关键字的表格。】思路：搜索词通过split()函数进行分割，每个切割的单元search()函数检测是否在表格单元的字符串值中存在。

window.onload=function()

{

    var oTab=document.getElementById('tab1');

    var oTxt=document.getElementById('name');

    var oBtn=document.getElementById('btn1');

    oBtn.onclick=function()

    {

        for(var i=0;i<oTab.tBodies[0].rows.length;i++)

        {

            oTab.tBodies[0].rows[i].style.display='none';

            var sTab=oTab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase();

            var sTxt=oTxt.value.toLowerCase();

            var arr=sTxt.split(' ');

            for(var j=0;j<arr.length;j++)

            {

                if(sTab.search(arr[j])!==-1)

                {

                   oTab.tBodies[0].rows[i].style.display='block';

                }

            }

        }

    }

};

　　错误的JavaScript代码

 oBtn.onclick=function()

    {

        for(var i=0;i<oTab.tBodies[0].rows.length;i++)

        {

            oTab.tBodies[0].rows[i].style.display='none';

            var sTxt=oTxt.value.toLowerCase().split(' ');

            if(oTab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase().search(sTxt)!==-1)

            {

                oTab.tBodies[0].rows[i].style.display='block';

            }

        }

　　(a)split()函数切割获得由一连串字符串组成的数组。search()函数内的参数为需要检索的字符串。(b)for循环内嵌套for循环时，若嵌套的for循环中包含两个循环参数，需要注意嵌套的循环若定义变量与外部循环相同可能导致的逻辑问题。

JavaScript在表格中模拟搜索多关键词搜索和筛选的更多相关文章

  1. JavaScript向表格中添加按钮和文本输入框

    例子: <?php ?> <html> <head> <meta http-equiv="Content-Type" content=&q ...

  2. 【高德地图API】从零开始学高德JS API（四）搜索服务——POI搜索|自动完成|输入提示|行政区域|交叉路口|自有数据检索

    原文:[高德地图API]从零开始学高德JS API(四)搜索服务——POI搜索|自动完成|输入提示|行政区域|交叉路口|自有数据检索 摘要:地图服务,大家能想到哪些?POI搜素,输入提示,地址解析,公 ...

  3. 【高德地图API】从零開始学高德JS API（四）搜索服务——POI搜索|自己主动完毕|输入提示|行政区域|交叉路口|自有数据检索

    地图服务.大家能想到哪些?POI搜素,输入提示,地址解析,公交导航,驾车导航,步行导航,道路查询(交叉口),行政区划等等.假设说覆盖物Marker是地图的骨骼,那么服务,就是地图的气血. 有个各种各样 ...

  4. 获取百度地图POI数据三（模拟关键词搜索）

    上一篇博文中讲到如何获取用于搜索的关键词,并且已经准备好了一百五十万的关键词   这其中有门牌号码,餐馆酒店名称,公司名称,道路名称等.有了这些数据,我们就可以通过代码,模拟我们在百度地图的搜索框中搜 ...

  5. 在C#中模拟Javascript的setTimeout方法

    在C#中模拟Javascript的setTimeout方法 背景 每种语言都有自己的定时器(Timer),很多人熟悉Javascript中的setInterval和setTimeout,在Javasc ...

  6. UWP 在 WebView 中执行 JavaScript 代码（用于模拟用户输入等）

    UWP 中使用 WebView 时可以在网页中额外执行一些代码.于是你几乎可以在网页上做任何事情,那些你可以在浏览器控制台中做的事情. 本文将介绍做法. 本文内容 准备环境 执行 JavaScript ...

  7. UWP 在 WebView 中执行 JavaScript 代码（用于模拟用户输入等） - walterlv

    原文:UWP 在 WebView 中执行 JavaScript 代码(用于模拟用户输入等) - walterlv UWP 在 WebView 中执行 JavaScript 代码(用于模拟用户输入等) ...

  8. JavaScript读取剪贴板中的表格生成图片

    原文 JavaScript读取剪贴板中的表格生成图片 演示地址 你可以访问下面的地址体验每个demo https://fairyever.github.io/excel-to-image-demo/ ...

  9. ajax异步获取数据后动态向表格中添加数据(行)

    因为某些原因,项目中突然需要做自己做个ajax异步获取数据后动态向表格中添加数据的页面,网上找了半天都没有 看到现成的,决定自己写个例子 1.HTML页面 <!doctype html> ...

随机推荐

  1. （转） Quartz学习——SSMM(Spring+SpringMVC+Mybatis+Mysql)和Quartz集成详解（四）

    http://blog.csdn.net/u010648555/article/details/60767633 当任何时候觉你得难受了,其实你的大脑是在进化,当任何时候你觉得轻松,其实都在使用以前的 ...

  2. C# SetWindowsHookEx

    [DllImport("user32.dll")] static extern IntPtr SetWindowsHookEx(int idHook, keyboardHookPr ...

  3. Linux 之CentOS7使用firewalld打开关闭防火墙与端口

    一.firewalld的基本使用 启动: systemctl start firewalld 关闭: systemctl stop firewalld 查看状态: systemctl status f ...

  4. 2 Button

    // <summary> /// 设置透明按钮样式 /// </summary> private void SetBtnStyle(Button btn) { btn.Flat ...

  5. IO编程——复制一个文件中的内容到另一个文件

    public class TestIO { public static void main(String[] args) { File inputFile = new File("a.txt ...

  6. SDOI2018退役记

    在NOIp2017中,我意识到自己啥也不会.如今SDOI2018快来了,自己还是啥也不会.高一两次考试注定以打两次酱油告终.还是记录一下,到NOIp之后如果还没有退役的话,那这个博客可能还会继续更新吧 ...

  7. Luogu P2922 秘密消息

    原题 P2922 [USACO08DEC]秘密消息Secret Message 题目描述 Bessie is leading the cows in an attempt to escape! To ...

  8. 基于requests模块的cookie,session和线程池爬取

    目录 基于requests模块的cookie,session和线程池爬取 基于requests模块的cookie操作 基于requests模块的代理操作 基于multiprocessing.dummy ...

  9. PAT 1107 Social Clusters

    When register on a social network, you are always asked to specify your hobbies in order to find som ...

  10. 【IntelliJ IDEA】idea上安装Translation插件后，需要AppKey才能生效的解决方案

    使用idea安装的翻译插件translation,但是使用的时候并不友好 无奈,如果想使用翻译软件并且更方便的话,可以如下: 可以选择将translation进行卸载 清除缓存并进行重启 然后再启动之 ...