JavaScript表格搜索高亮功能模拟

　　在网页表格中模拟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值，与输入表格值进行比较是否相等。若两值相等，则高亮显示，其余表格不变色。

 1 window.onload=function()
 2 {
 3     var oTxt=document.getElementById('name');
 4     var oBtn=document.getElementById('btn1');
 5     var oTab=document.getElementById('tab1');
 6     oBtn.onclick=function()
 7     {
 8         for(var i=0;i<oTab.tBodies[0].rows.length;i++)
 9         {
10             if(oTab.tBodies[0].rows[i].cells[1].innerHTML==oTxt.value)
11             {
12                 oTab.tBodies[0].rows[i].cells[1].style.background='yellow';
13             }
14             else
15             {
16                 oTab.tBodies[0].rows[i].cells[1].style.background='';
17             }
18         }
19     }
20 };

　　(1)出现问题

　　代码写成这样：

 1 window.onload=function()
 2 {
 3     var oTxt=document.getElementById('name');
 4     var oBtn=document.getElementById('btn1');
 5     var oTab=document.getElementById('tab1');
 6     var oValue=oTxt.value;
 7     
 8     oBtn.onclick=function()
 9     {
10         for(var i=0;i<oTab.tBodies[0].rows.length;i++)
11         {
12             if(oTab.tBodies[0].rows[i].cells[1].innerHTML==oValue)
13             {
14                 oTab.tBodies[0].rows[i].cells[1].style.background='yellow';
15             }
16             else
17             {
18                 oTab.tBodies[0].rows[i].cells[1].style.background='';
19             }
20         }
21     }
22     
23 
24 };

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

　　初步定为问题产生的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='';
            }
        }
    }

};

 

posted @ 2018-07-17 16:54  请叫我二狗哥  阅读(1090)  评论(0)    收藏  举报