在网页表格中模拟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. 计组_IEEE754_练习题

    IEEE754   阶码:移码:尾数:原码 一个规格化的32位浮点数x的真值可表示为:          x=(-1)^s×(1. M) × 2^(E-127)       e=E-127 其中尾数域 ...

  2. 删除Git服务器文件但是保留本地文件

    参考: https://blog.csdn.net/u012804886/article/details/83059315 https://www.cnblogs.com/wfsovereign/p/ ...

  3. cesium的学习

    一.学习资料:http://cesiumjs.org/tutorials.html,看完6个教程后对图层加载.控件控制开关.地形数据叠加.模型添加.相机控制.图形绘制有一点了解.这也是cesium的主 ...

  4. picturebox中添加图片

    private void Form1_Load(object sender, EventArgs e) { radioButton2.Checked = true; } private void ra ...

  5. 汇编：MSR/MRS/BIC指令

    1.MRS指令MRS指令的格式为:MRS{条件}   通用寄存器,程序状态寄存器(CPSR或SPSR)MRS指令用于将程序状态寄存器的内容传送到通用寄存器中.该指令一般用在以下两种情冴: Ⅰ.当需要改 ...

  6. switch方法中使用数字区间

    function getCategory(age) { var category = ""; switch (true) { case isNaN(age): category = ...

  7. 浏览器 <html>相关

    若页面需默认用极速核,增加标签:<meta name="renderer" content="webkit">  https://blog.csdn ...

  8. Django REST framework - 认证

    目录 认证 DRF 5种验证方式 如何确定身份验证? 设置身份验证方案 案例: 基于自定义Token认证 第一步: 定义一个用户表和一个保存用户Token的表 第二步: 定义一个登陆视图 第三步定义一 ...

  9. 【codeforces 785E】Anton and Permutation

    [题目链接]:http://codeforces.com/problemset/problem/785/E [题意] 给你一个初始序列1..n顺序 然后每次让你交换任意两个位置上面的数字; 让你实时输 ...

  10. 这书真的不错--Spring MVC Beginner's Guide

    五百多页,我干到三百多页了. 每个知识点都有说明,操作,解释. 学SPRING MVC,有它就够了. 遗憾的是,这个PDF的文档格式太稀松啦,且,无中文版~~~ 我都想作汉化翻译工作了...算了,忍住 ...