JavaScript：谈循环中的匿名函数

先看下面的代码

<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()">

欢迎大家发表看法!