WEB开发网
开发学院网页设计JavaScript JavaScript:谈循环中的匿名函数 阅读

JavaScript:谈循环中的匿名函数

 2010-09-14 13:37:50 来源:WEB开发网   
核心提示:先看下面的代码<SCRIPT LANGUAGE="JavaScript"><!--function Delete_Row(i){alert(i);}function test(){ for(var i = 0; i < 5;i++ ) { var table11 = docu

先看下面的代码

<SCRIPT LANGUAGE="JavaScript">
 <!--
 function Delete_Row(i)
 {
  alert(i);
 }
 function test()
 {
    for(var i = 0; i < 5;i++ )
    {
       var table11 = document.getElementById("table11");
       var tr11 = table11.insertRow();
       var trstr="tr"+tr11.rowIndex;
       tr11.id=trstr;
  
      tr11.ondblclick=function()
      {
            Delete_Row(trstr);
      };
  
       var td11 = tr11.insertCell();
       td11.innerHTML = i;
       td11 = tr11.insertCell();
       td11.innerText = "我爱你";
       td11 = tr11.insertCell();
       td11.innerText = "笨蛋";
       td11 = tr11.insertCell();
  
  }
  }
 //-->
 </SCRIPT>
 <table id="table11" border=1>
 <tbody>
 <tr>
 <td>第一列</td>
 <td>第二列</td>
 <td>第三列</td>
 </tr>
 </tbody>
 </table>
 <br>
 <input type="button" value="GO" onclick="test()">

点击按钮之后,会在table11中插入5行,行的双击事件就是使用了匿名函数。

试想,点击第2行和第3行,你会看到什么,会是alert('tr0') 和 alert('tr1')吗,和你想的一样?

很显然不是我想要的结果,而是弹出了alert('tr5'),真是有点儿怪哦!可以肯定的是问题肯定是出在匿名函数上,有可能是这个行的双击事件都指向了同一下匿名函数,不知道各位有什么看法?

而把上述代码修改成如下代码,就会得到我们想到的结果。

<SCRIPT LANGUAGE="JavaScript">
 <!--
 function Delete_Row(i)
 {
  alert(i);
 }
 function test()
 {
      for(var i = 0; i < 5;i++ )
      {
 
       var table11 = document.getElementById("table11");
      
       var tr11 = table11.insertRow();
       var trstr="tr"+tr11.rowIndex;
       tr11.id=trstr;
  
       tr11.ondblclick=f(trstr);
       var td11 = tr11.insertCell();
       td11.innerHTML = i;
       td11 = tr11.insertCell();
       td11.innerText = "我爱你";
       td11 = tr11.insertCell();
       td11.innerText = "笨蛋";
       td11 = tr11.insertCell();
  
    }
  }
  function f(i)
  {
    return function()
    {
        Delete_Row(i);
    }
  }
 //-->
 </SCRIPT>
 <table id="table11" border=1>
 <tbody>
 <tr>
 <td>第一列</td>
 <td>第二列</td>
 <td>第三列</td>
 </tr>
 </tbody>
 </table>
 <br>
 <input type="button" value="GO" onclick="test()">

欢迎大家发表看法!

Tags:JavaScript 循环 匿名

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接