在网页表格中模拟excle的搜索高亮显示功能。当在搜索框中输入需要的姓名时，若表格中存在对应的数据，则该表格背景色变为黄色。

　　下面为表的HTML源码：

<!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>5</td><td>JavaScript权威指南</td><td>27</td></tr>

    </tbody>

</table>

</body>

</html>

　　模拟思路：获取表格中姓名列对应的元素集合的value值，与输入表格值进行比较是否相等。若两值相等，则高亮显示，其余表格不变色。

 window.onload=function()

 {

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

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

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

     oBtn.onclick=function()

     {

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

         {

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

             {

                 oTab.tBodies[0].rows[i].cells[1].style.background='yellow';

             }

             else

             {

                 oTab.tBodies[0].rows[i].cells[1].style.background='';

             }

         }

     }

 };

　　(1)出现问题

　　代码写成这样：

 window.onload=function()

 {

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

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

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

     var oValue=oTxt.value;

     oBtn.onclick=function()

     {

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

         {

             if(oTab.tBodies[0].rows[i].cells[1].innerHTML==oValue)

             {

                 oTab.tBodies[0].rows[i].cells[1].style.background='yellow';

             }

             else

             {

                 oTab.tBodies[0].rows[i].cells[1].style.background='';

             }

         }

     }

 };

　　造成第一次输入点击后，第二次输入点击无效。

　　初步定为问题产生的bug在于后者在于获取input元素的value时，定义变量var oValue=oTxt.value;

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

　　if(oTab.tBodies[0].rows[i].cells[1].innerHTML==oValue)两者的差异。

　　造成这个bug的原因是什么?

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

　　var oValue=oTxt.value;

　　if(oTab.tBodies[0].rows[i].cells[1].innerHTML==oValue)

　　与

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

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

　　造成两个代码块的核心区别的原因是什么?

　　似乎在于变量赋值于点击事件触发函数调用的前后有关，将有问题的代码的变量移到函数内部，整个代码也正常了。JS中变量初始化的值只有一个？

window.onload=function()

{

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

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

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

    oBtn.onclick=function()

    {

        var oValue=oTxt.value;

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

        {

            if(oTab.tBodies[0].rows[i].cells[1].innerHTML==oValue)

            {

                oTab.tBodies[0].rows[i].cells[1].style.background='yellow';

            }

            else

            {

                oTab.tBodies[0].rows[i].cells[1].style.background='';

            }

        }

    }

};

JavaScript表格搜索高亮功能模拟的更多相关文章

  1. JavaScript实现搜索联想功能

    -.虽然Jquery已经有了一个完整的包 实现前端搜索联想功能,但是出于学习还是想了解一下实现此功能的原理性 回想起来 实现此功能很简单,1.前端输入字符串 文本改变 异步请求服务器 将返回的资料显示 ...

  2. Solr(五)Solr实现简单的类似百度搜索高亮功能-2代码

    Solr高亮 一 在配置文件中,配置支持Ik分词器的Field 修改文件: cd /usr/local/tomcat/apache-tomcat-8.5.13/solr_home/Test/conf/ ...

  3. Solr(四)Solr实现简单的类似百度搜索高亮功能-1.配置Ik分词器

    配置Ik分词器 一 效果图 二 实现此功能需要添加分词器,在这里使用比较主流的IK分词器. 1 没有配置IK分词器,用solr自带的text分词它会把一句话分成单个的字. 2 配置IK分词器,的话它会 ...

  4. 简单JavaScript语句实现搜索关键字高亮功能

    高亮功能主要是指对页面中指定区域的指定文字进行高亮显示,也就是背景着色.一般在搜索结果页面会经常用到这个功能. 下面就为大家提供一种解决方案,用javascript实现. 首先在<head> ...

  5. Django中使用JS通过DataTable实现表格前端分页，每页显示页数，搜索等功能

    Django架构中自带了后端分页的技术,通过Paginator进行分页,前端点击按钮提交后台进行页面切换. 优缺点:后端分页对于数据量大的场景有其优势,但页面切换比较慢. 后端分页python3代码如 ...

  6. 用jsonp实现搜索框功能

    用jsonp实现搜索框功能 前面的话: 在上周本来想发一篇模仿必应搜索的界面.但是在准备写文章之前突然想到前面学习了ajax技术,在这里我也让我的页面有一种不需要手动刷新就能获取到数据.但是发现用前面 ...

  7. 分享12款 JavaScript 表格控件（DataGrid）

    JavaScript 表格控件可以操作大数据集的 HTML 表格,提供各种功能,如分页.排序.过滤以及行编辑.在本文中,我们整理了13个最好的 JavaScript 表格插件分享给开发人员,开发者可以 ...

  8. 12款 JavaScript 表格控件（DataGrid）

    JavaScript 表格控件可以操作大数据集的 HTML表格,提供各种功能,如分页.排序.过滤以及行编辑.在本文中,我们整理了13个最好的 JavaScript 表格插件分享给开发人员,开发者可以很 ...

  9. 【转】一张图解析FastAdmin中的表格列表的功能

     一张图解析FastAdmin中的表格列表的功能 功能描述请根据图片上的数字索引查看对应功能说明. 1.时间筛选器如果想在搜索栏使用时间区间进行搜索,则可以在JS中修改修改字段属性,如 {field: ...

随机推荐

  1. Weex框架源码分析（Android）（一）

    一.weexSDK初始化流程 WXSDKEngine.initialize(Application application,InitConfig config); //WXSDKEngine的init ...

  2. 小白学习Spark系列五：scala解析多级json格式字符串

    一.背景 处理json格式的字符串,key值一定为String类型,但value不确定是什么类型,也可能嵌套json字符串,以下是使用 JSON.parseFull 来解析多层json. 二.实例代码 ...

  3. Linux内核同步：per_cpu变量

    per cpu变量相关函数和宏 DEFINE_PER_CPU_SHARED_ALIGNED(type,name):静态分配per_cpu数组,数组名为name,结构类型为type DEFINE_PER ...

  4. 一篇入门Node.js

    目录 1.Node.js 简介 2.Node.js NPM 3.Node.js 模块 4.Node.js 事件 5.Node.js Buffer 6.Node.js 文件系统 7.Node.js St ...

  5. linux - 运维软件saltstack

    目录 运维软件saltstack 安装使用流程 运维软件saltstack 早期运维人员会根据自己的生产环境来写特定脚本完成大量重复性工作,这些脚本复杂且难以维护.系统管理员面临的问题主要是1.系统配 ...

  6. pandas - 案例(股票分析)

    需求: 使用tushare包获取某股票的历史行情数据. 输出该股票所有收盘比开盘上涨3%以上的日期. 输出该股票所有开盘比前日收盘跌幅超过2%的日期. 假如我从2010年1月1日开始,每月第一个交易日 ...

  7. 【 Codeforces Global Round 1 B】Tape

    [链接] 我是链接,点我呀:) [题意] x轴上有m个连续的点,从1标号到m. 其中有n个点是特殊点. 让你用k段区间将这n个点覆盖. 要求区间的总长度最小. [题解] 一开始假设我们需要n个胶带(即 ...

  8. 【Codeforces 158A】Next Round

    [链接] 我是链接,点我呀:) [题意] 让你找到排名的前k名,并列的话,如果分数大于0那么就算晋级 问你最后有多少人可以晋级. [题解] 按照题意模拟就好, 先按照a[max] = a[k]的规则找 ...

  9. Git学习总结（13）——使用git.oschina作为自己的源代码在线管理库

    工作有几年了,期间积累了很多的代码片段,一直想找个存放的地方,方便随时的取用.以前可能是放在自己电脑的硬盘中,但毕竟这样使用起来还是有很多不便. 下面通过码云来说明 一下设置过程.其实,码云和GitH ...

  10. qwb与学姐

    qwb与学姐 Time Limit: 1 Sec  Memory Limit: 128 MB Description qwb打算向学姐表白,可是学姐已经受够了他的骚扰,于是出了一个题想难住他:已知一幅 ...