循环结构中JavaScript匿名函数用法实例解析 - Go语言中文社区

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


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.  

版权声明:本文来源51CTO,感谢博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
原文链接:http://developer.51cto.com/art/201010/228965.htm
站方申明:本站部分内容来自社区用户分享,若涉及侵权,请联系站方删除。
  • 发表于 2021-05-16 07:40:48
  • 阅读 ( 577 )
  • 分类:

0 条评论

请先 登录 后评论

官方社群

GO教程

猜你喜欢