在网页表格中模拟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. 为什么有些异常throw出去需要在函数头用throws声明，一些就不用

    throw new IllegalStateException(".");不用在函数头声明throws IllegalStateExceptionthrow new IOExcep ...

  2. C# 控件调整

    //最大化 this.WindowState = FormWindowState.Maximized; //去掉标题栏 this.FormBorderStyle = FormBorderStyle.N ...

  3. day08-字符编码

    目录 计算机基础 启动应用程序 写文本的流程 Python解释器执行文件的原理 Python解释器与文本编辑器的区别 字符编码 字符编码发生在哪三个阶段 字符编码发展史与分类 总结 Python2与P ...

  4. antiSMASH数据库：微生物次生代谢物合成基因组簇查询和预测

    2017年4月28日,核酸研究(Nucleic Acids Research)杂志上,在线公布了一个可搜索微生物次生代谢物合成基因组簇的综合性数据库antiSMASH数据库 4.0版,前3版年均引用2 ...

  5. cocos自动图集

    对于图像资源,为什么要用图集,cocos官网的解释: 1.合成图集时会去除每张图片周围的空白区域,加上可以在整体上实施各种优化算法,合成图集后可以大大减少游戏包体和内存占用2.多个 Sprite 如果 ...

  6. 【转】jmeter定时调度,持续并发,使用简介

    一.安装Jmeter 1.下载Jmeter 下载地址:http://jmeter.apache.org/download_jmeter.cgi 目前最新版为2.9,其余文件如源代码等也可从如下官网下载 ...

  7. python编写webservice接口

    1.pip install suds-jurko 2.pip install client #coding=utf-8 from suds.client import Client class Web ...

  8. ES6学习历程(变量的声明)

    2019-01-25: 一:变量的声明: 1.对于变量的声明添加了let,const两种方式 关于let: (1)不存在变量提升--必须先声明再使用; (2)会出现暂时性死区--在一个方法外用var声 ...

  9. STL源码分析之内存池

    前言 上一节只分析了第二级配置器是由多个链表来存放相同内存大小, 当没有空间的时候就向内存池索取就行了, 却没有具体分析内存池是怎么保存空间的, 是不是内存池真的有用不完的内存, 本节我们就具体来分析 ...

  10. 3.1 一个简单的Java应用程序

        如下一个最简单的应用程序,它将只发送一条消息到控制台窗口中: package myjavapp;   public class FirstSample {       public stati ...