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

　　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. python开发 面试题

    一.简述列表与元组的区别 答: 元组tuple与列表List相同点 元组tuple与列表List都是序列类型的容器对象,可以存放任何类型的数据.支持切片.迭代等操作. 元组tuple与列表List区别 ...

  2. 2018年为什么要学习Linux？Linux运维的前景还好吗？

    Linux一直是很多人入行IT的首选,无论是从入行难度还是职业寿命来说,Linux运维都比开发有着更大的优势.为了得到高薪工作,很多人在Linux学习过程中付出了非常大的努力,最终也得到了不错的收获. ...

  3. VMware Workstation搭建Linux操作系统

    1.单击“创建新的虚拟机”选项,并在弹出的“新建虚拟机向导”界面中选择“自定义”单选按钮,然后单击“下一步”. 新建虚拟机向导 2.选择虚拟机硬件兼容性,是否兼容之前旧的版本. 兼容性选择 3.选中“ ...

  4. PAT 1113 Integer Set Partition

    Given a set of N (>1) positive integers, you are supposed to partition them into two disjoint set ...

  5. 平衡树前置——BST

    上一节:平衡树——序 BST(Binary Search Tree)二叉排序树,其定义为:二叉排序树或者是空树,或者是满足如下性质的二叉树: ①若它的左子树非空,则左子树上所有结点的值均小于根结点的值 ...

  6. hadoop datanode usages方差算法

    stdDev 标准差(方差) 阐述及应用 简单来说,标准差是一组数值自平均值分散开来的程度的一种测量观念.一个较大的标准差,代表大部分的数值和其平均值之间差异较大:一个较小的标准差,代表这些数值较接近 ...

  7. Appium Desktop-运行（window+android4.4.2）

    1.启动Appium Desktop 2.点击Start Server V1.7.1 3.创建新的session,点击放大镜 4.创建属性 5.填写后,可运行start session启动服务 右侧自 ...

  8. ARC 73 E - Ball Coloring

    E - Ball Coloring Time limit : 2sec / Memory limit : 256MB Score : 700 points Problem Statement Ther ...

  9. JS判断浏览器类型和屏幕分辨率来调用不同的CSS样式

    代码如下: <!-- if (window.navigator.userAgent.indexOf("MSIE")>=1) { var IE1024="&qu ...

  10. nyoj_513_A+B Problem IV_20130131532

    A+B Problem IV 时间限制:1000 ms  |           内存限制:65535 KB 难度:3   描述 acmj最近发现在使用计算器计算高精度的大数加法时很不方便,于是他想着 ...