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

　　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. sqlserver 2014 删除主键约束

    truncate table menu SELECT * FROM sys.foreign_keys WHERE referenced_object_id=OBJECT_ID('menu'); --找 ...

  2. log4net 局部代码 看不懂....

    public interface ILogger {} public interface ILoggerWrapper { ILogger Logger {get;} } public interfa ...

  3. 郁闷的出纳员 题解（Splay）

    题面 看似是要区间修改,然而实际上只需要维护底线和工资的相对大小关系, 瞬间变水 用delta记录对工资的加减,那么添加节点时点权应-delta,输出时+delta 几种操作中减少工资较麻烦: 1.d ...

  4. day41 网络编程

    目录 网络架构 单机架构 CS架构 BS架构 互联网和互联网的组成(教材版) 边缘部分: 核心部分: 互联网的组成 硬件 软件 打开网页的过程(科普版) 物理层 数据链路层 网络层 传输层 抽象层 网 ...

  5. ImageMagick的下载和配置

    2. 新建一个VC++的工程,项目->属性 VC++目录中 包含目录中加入4项,ImageMagick安装路径下的include文件夹,和include里边的三个文件夹. 库目录中加入1项,Im ...

  6. js 算法排序总结

    1.冒泡排序JavaScript代码实现: function bubbleSort(arr) { var len = arr.length; for (var i = 0; i < len; i ...

  7. leetcode刷题记录--js

    leetcode刷题记录 两数之和 给定一个整数数组 nums 和一个目标值 target,请你在该数组中找出和为目标值的那 两个 整数,并返回他们的数组下标. 你可以假设每种输入只会对应一个答案.但 ...

  8. HDU1465 不容易系列之一&&HDU4535吉哥系列故事——礼尚往来

    HDU1465不容易系列之一 Problem Description 大家常常感慨,要做好一件事情真的不容易,确实,失败比成功容易多了!做好“一件”事情尚且不易,若想永远成功而总从不失败,那更是难上加 ...

  9. 团体程序设计天梯赛-练习集L1-006. *连续因子

    L1-006. 连续因子 时间限制 400 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 陈越 一个正整数N的因子中可能存在若干连续的数字.例如630 ...

  10. oracle数据库审计

    Oracle使用大量不同的审计方法来监控使用何种权限,以及访问哪些对象.审计不会防止使用这些权限,但可以提供有用的信息,用于揭示权限的滥用和误用. 下表中总结了Oracle数据库中不同类型的审计. 审 ...