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

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

循环结构中的JavaScript匿名函数

先看下面的代码

 
 
 

  
  
  
<SCRIPTLANGUAGESCRIPTLANGUAGE="JavaScript"> 
  
  
  
　<!--  
  
  
  
　functionDelete_Row(i)  
  
  
  
　{  
  
  
  
　　alert(i);  
  
  
  
　}  
  
  
  
　functiontest()  
  
  
  
　{  
  
  
  
　　　for(vari=0;i<5;i++)  
  
  
  
　　　{  
  
  
  
　　　　　　vartable11=document.getElementById("table11");  
  
  
  
　　　　　　vartr11=table11.insertRow();  
  
  
  
　　　　　　vartrstr="tr"+tr11.rowIndex;  
  
  
  
　　　　　　tr11.id=trstr;  
  
  
  
　　  
  
  
  
　　　　　　tr11.ondblclick=function()  
  
  
  
　　　　　　{  
  
  
  
　　　　　　　　　　　Delete_Row(trstr);  
  
  
  
　　　　　　};  
  
  
  
　　  
  
  
  
　　　　　　vartd11=tr11.insertCell();  
  
  
  
　　　　　　td11.innerHTML=i;  
  
  
  
　　　　　　td11=tr11.insertCell();  
  
  
  
　　　　　　td11.innerText="我爱你";  
  
  
  
　　　　　　td11=tr11.insertCell();  
  
  
  
　　　　　　td11.innerText="笨蛋";  
  
  
  
　　　　　　td11=tr11.insertCell();  
  
  
  
　　  
  
  
  
　　}  
  
  
  
　　}  
  
  
  
　//--> 
  
  
  
　</SCRIPT> 
  
  
  
　<tableidtableid="table11"border=1> 
  
  
  
　<tbody> 
  
  
  
　<tr> 
  
  
  
　<td>***列</td> 
  
  
  
　<td>第二列</td> 
  
  
  
　<td>第三列</td> 
  
  
  
　</tr> 
  
  
  
　</tbody> 
  
  
  
　</table> 
  
  
  
　<br> 
  
  
  
　<inputtypeinputtype="button"value="GO"onclick="test()"> 
  
  
  
 
 
 
 

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

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

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

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

 
 
 

  
  
  
<SCRIPTLANGUAGESCRIPTLANGUAGE="JavaScript"> 
  
  
  
　<!--  
  
  
  
　functionDelete_Row(i)  
  
  
  
　{  
  
  
  
　　alert(i);  
  
  
  
　}  
  
  
  
　functiontest()  
  
  
  
　{  
  
  
  
　　　　　for(vari=0;i<5;i++)  
  
  
  
　　　　　{  
  
  
  
　  
  
  
  
　　　　　　vartable11=document.getElementById("table11");  
  
  
  
　　　　　　  
  
  
  
　　　　　　vartr11=table11.insertRow();  
  
  
  
　　　　　　vartrstr="tr"+tr11.rowIndex;  
  
  
  
　　　　　　tr11.id=trstr;  
  
  
  
　　  
  
  
  
　　　　　　tr11.ondblclick=f(trstr);  
  
  
  
　　　　　　vartd11=tr11.insertCell();  
  
  
  
　　　　　　td11.innerHTML=i;  
  
  
  
　　　　　　td11=tr11.insertCell();  
  
  
  
　　　　　　td11.innerText="我爱你";  
  
  
  
　　　　　　td11=tr11.insertCell();  
  
  
  
　　　　　　td11.innerText="笨蛋";  
  
  
  
　　　　　　td11=tr11.insertCell();  
  
  
  
　　  
  
  
  
　　　　}  
  
  
  
　　}  
  
  
  
　　functionf(i)  
  
  
  
　　{  
  
  
  
　　　　return　function()  
  
  
  
　　　　{  
  
  
  
　　　　　　　Delete_Row(i);  
  
  
  
　　　　}  
  
  
  
　　}  
  
  
  
　//--> 
  
  
  
　</SCRIPT> 
  
  
  
　<tableidtableid="table11"border=1> 
  
  
  
　<tbody> 
  
  
  
　<tr> 
  
  
  
　<td>***列</td> 
  
  
  
　<td>第二列</td> 
  
  
  
　<td>第三列</td> 
  
  
  
　</tr> 
  
  
  
　</tbody> 
  
  
  
　</table> 
  
  
  
　<br> 
  
  
  
　<inputtypeinputtype="button"value="GO"onclick="test()"> 
  
  
  
 
 
 
 

【编辑推荐】

1. 详细说明Javascript匿名函数技巧与文章
2. JavaScript函数的定义及形式参数
3. C#代码与JavaScript函数的相互调用
4. JavaScript函数中arguments对象
5. Javascript中CSS属性float特殊写法