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

 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='';
            }
        }
    }

};