在网页表格中模拟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. CAD绘一个文字自动剧中的标注 （com接口）

    主要用到函数说明: _DMxDrawX::DrawDimRotated 绘制一个线型标注.详细说明如下: 参数 说明 DOUBLE dExtLine1PointX 输入第一条界线的起始点X值 DOUB ...

  2. SQL一对多取子表最新记录的所有字段(ROW_NUMBER()OVER()函数的应用)

    ROW_NUMBER()OVER() 参数1:分组字段 PARTITION BY   ..,..,....  可选 参数2:排序字段 ORDER BY .. DESC  必须 实例: 根据Confir ...

  3. Django - 基于orm实现用户增删改查

    1.基于orm实现用户新增 user_info.html中,增加代码: views.py中,在原user_info函数中,增加判断代码: 备注:最后一句,可以通过return redirect 实现, ...

  4. Python----DFS---骑士周游问题

    这篇文章将会将一个数据结构与算法中一个很经典很重要的概念——深度优先搜索(Depth-First-Search:DFS).........(你他喵不是在标题里说了吗?) 好吧,DFS的精髓我其实也还没 ...

  5. JeePlus 工作流版本 sping mvc oa crm erp java html5 源码

    https://shop108220642.taobao.com/search.htm?spm=2013.1.w5002-5297459241.1.mnhAZ5&search=y http:/ ...

  6. Linux之网络文件共享服务(SamBa)

    SMB:Server Message Block服务器消息块,IBM发布,最早是DOS网络文 件共享协议 Cifs:common internet file system,微软基于SMB发布 SAMB ...

  7. cuda npp库旋转图片

    #include <stdio.h> #include <stdlib.h> #include <string.h> #include <assert.h&g ...

  8. vue 底部bottomnav

    <template> <div id="foot"> <div class="tabBar"> <div class= ...

  9. 【codeforces 758D】Ability To Convert

    [题目链接]:http://codeforces.com/contest/758/problem/D [题意] 给你一个n进制的数k; 问你它可能的最小的十进制数是多少; [题解] 从右往左; 获取数 ...

  10. CodeForcesGym 100735B Retrospective Sequence

    Retrospective Sequence Time Limit: Unknown ms Memory Limit: 65536KB This problem will be judged on C ...