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

　　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. zepto处理touch事件

    处理Touch事件能让你了解到用户的每一根手指的位置,在touch事件触发的时候产生,可以通过touch event handler的event对象取到,如果基于zepto.js开发,一般是通过eve ...

  2. swap() 函数实现的方法

    swap()函数总结: 一.利用临时变量 1.引用(交换任意类型) template <typename T> void swap(T& x,T& y) { T tmp; ...

  3. 4.几个「不难但却很有用」的 Git 技能点

    阅读 Git 原理详解及实用指南 记录 tag:不可移动的 branch tag 是一个和 branch 非常相似的概念,它和 branch 最大的区别是:tag 不能移动.所以在很多团队中,tag ...

  4. PKI 的组成

    PKI(Public Key Infrastructure)公钥基础设施是提供公钥加密和数字签名服务的系统或平台,目的是为了管理密钥和证书.一个机构通过采用PKI 框架管理密钥和证书可以建立一个安全的 ...

  5. 【codeforces 765E】Tree Folding

    [题目链接]:http://codeforces.com/problemset/problem/765/E [题意] 给你一棵树; 可以把一个节点的两条相同长度的链合并成一条链; 且这两条相同长度的链 ...

  6. 【codeforces 796B】Find The Bone

    [题目链接]:http://codeforces.com/contest/796/problem/B [题意] 一开始骨头在1号位置; 然后有m个洞,给出洞的下标; 然后有k个交换操作; 如果骨头到洞 ...

  7. ZOJ 3233 Lucky Number

    Lucky Number Time Limit: 5000ms Memory Limit: 32768KB This problem will be judged on ZJU. Original I ...

  8. POJ - 3541 - Given a string…

    Given a string… Time Limit: 10000MS   Memory Limit: 65536K Total Submissions: 1819   Accepted: 390 C ...

  9. 温故之--Linux 初始化 init 系统

    参选URL: http://www.ibm.com/developerworks/cn/linux/1407_liuming_init1/index.html 本系列一共三篇,看完记住,那水平就不一样 ...

  10. Hello, HTML5!

    一个典型的HTML5文档的基础结构如下: <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”utf ...