在网页表格中模拟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. Address space layout randomization

    Address space layout randomization (ASLR) is a computer security technique involved in preventing ex ...

  2. Python 之pygame飞机游戏

    import pygame from pygame.locals import * import time import random # 我机 class HeroPlane(object): de ...

  3. python爬虫14 | 就这么说吧，如果你不懂python多线程和线程池，那就去河边摸鱼！

    你知道吗? 在我的心里 你是多么的重要 就像 恩 请允许我来一段 freestyle 你们准备好了妹油 你看 这个碗 它又大又圆 就像 这条面 它又长又宽 你们 在这里 看文章 觉得 很开心 就像 我 ...

  4. Golang之路

    目录 Golang之路 Golang之路 Golang(一) - 开篇必须吹牛逼 Golang(二) - 第一个go程序和基本语法 Golang(三) - 函数 Golang(四) - 流程控制 Go ...

  5. Git 基础教程 之 别名

     配置别名, 例如:       git config --global alias.st status                                      git config ...

  6. Fedora15下安装Android开发环境

    Fedora15下安装Android开发环境需要以下步骤: 完整步骤. 1. 安装正确版本的JDK. 2. 安装Eclipse. 3.  安装ADT. 4.  安装Android SDK. 5.  安 ...

  7. debug jdk source can't watch variable what it is

    https://www.cnblogs.com/shuaiqing/p/7525841.html https://stackoverflow.com/questions/18255474/debug- ...

  8. G - Power Strings

    Given two strings a and b we define a*b to be their concatenation. For example, if a = "abc&quo ...

  9. POJ 1416 Shredding Company 回溯搜索 DFS

    Shredding Company Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 6173   Accepted: 3361 ...

  10. spring入门笔记

    这是我自己学习韩顺平老师spring视频的笔记,个人认为初学spring的韩顺平老师的讲的很好,比较通俗易懂,资源地址我已经给了,可以自己配合视频看.主要介绍了ioc和aop,这也是spring框架最 ...