龙盟编程博客 | 无障碍搜索 | 云盘搜索神器
快速搜索
主页 > web编程 > Javascript编程 >

循环结构中JavaScript匿名函数用法实例解析

时间:2013-03-06 14:58来源:未知 作者:admin 点击:
分享到:
JavaScript函数有很多值得学习的地方,本文和大家重点讨论一下循环结构中的JavaScript匿名函数的使用,相信你一定会感兴趣。 循环结构中的JavaScript匿名函数 先看下面的代码 SCRIPTLANGUA

JavaScript函数有很多值得学习的地方,本文和大家重点讨论一下循环结构中的JavaScript匿名函数的使用,相信你一定会感兴趣。

循环结构中的JavaScript匿名函数

先看下面的代码

  1. <SCRIPTLANGUAGESCRIPTLANGUAGE="JavaScript"> 
  2.  <!--  
  3.  functionDelete_Row(i)  
  4.  {  
  5. alert(i);  
  6.  }  
  7.  functiontest()  
  8.  {  
  9.  for(vari=0;i<5;i++)  
  10.  {  
  11. vartable11=document.getElementById("table11");  
  12. vartr11=table11.insertRow();  
  13. vartrstr="tr"+tr11.rowIndex;  
  14. tr11.id=trstr;  
  15.  
  16. tr11.ondblclick=function()  
  17. {  
  18.  Delete_Row(trstr);  
  19. };  
  20.  
  21. vartd11=tr11.insertCell();  
  22. td11.innerHTML=i;  
  23. td11=tr11.insertCell();  
  24. td11.innerText="我爱你";  
  25. td11=tr11.insertCell();  
  26. td11.innerText="笨蛋";  
  27. td11=tr11.insertCell();  
  28.  
  29. }  
  30. }  
  31.  //--> 
  32.  </SCRIPT> 
  33.  <tableidtableid="table11"border=1> 
  34.  <tbody> 
  35.  <tr> 
  36.  <td>第一列</td> 
  37.  <td>第二列</td> 
  38.  <td>第三列</td> 
  39.  </tr> 
  40.  </tbody> 
  41.  </table> 
  42.  <br> 
  43.  <inputtypeinputtype="button"value="GO"onclick="test()"> 
  44.  

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

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

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

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

  1. <SCRIPTLANGUAGESCRIPTLANGUAGE="JavaScript"> 
  2.  <!--  
  3.  functionDelete_Row(i)  
  4.  {  
  5. alert(i);  
  6.  }  
  7.  functiontest()  
  8.  {  
  9.  for(vari=0;i<5;i++)  
  10.  {  
  11.    
  12. vartable11=document.getElementById("table11");  
  13.  
  14. vartr11=table11.insertRow();  
  15. vartrstr="tr"+tr11.rowIndex;  
  16. tr11.id=trstr;  
  17.  
  18. tr11.ondblclick=f(trstr);  
  19. vartd11=tr11.insertCell();  
  20. td11.innerHTML=i;  
  21. td11=tr11.insertCell();  
  22. td11.innerText="我爱你";  
  23. td11=tr11.insertCell();  
  24. td11.innerText="笨蛋";  
  25. td11=tr11.insertCell();  
  26.  
  27. }  
  28. }  
  29. functionf(i)  
  30. {  
  31. return function()  
  32. {  
  33.  Delete_Row(i);  
  34. }  
  35. }  
  36.  //--> 
  37.  </SCRIPT> 
  38.  <tableidtableid="table11"border=1> 
  39.  <tbody> 
  40.  <tr> 
  41.  <td>第一列</td> 
  42.  <td>第二列</td> 
  43.  <td>第三列</td> 
  44.  </tr> 
  45.  </tbody> 
  46.  </table> 
  47.  <br> 
  48.  <inputtypeinputtype="button"value="GO"onclick="test()"> 
  49.  

精彩图集

赞助商链接