求大神救命，检查了半天，38行一直报错，头都大了，我感觉逻辑都是对的

问题描述：

 <!DOCTYPE html>
<html>
<head>
    <title> new document </title>
    <meta http-equiv="Content-Type" content="text/html; charset=gbk"/>

</head>
<body>
<table border="1" width="50%" id="table">
    <tr>
        <th>学号</th>
        <th>姓名</th>
    </tr>
</table>
<input type="button" value="添加一行" onclick="addRow()"/>
<script type="text/javascript">
    var table = document.getElementById("table");
    function addRow() {
        var row = document.createElement("tr");
        table.appendChild(row);
        for (var i = 0; i < 2; i++) {
            var td = document.createElement("td");
            row.appendChild(td);
            var txt = document.createTextNode("点击输入");
            td.appendChild(txt);
            td.setAttribute("class","write");
        }
        //加一行绑定一行onlick事件
        click_writeIn();
    }
    function click_writeIn() {
        var dt_write = document.getElementsByClassName("write");
        alert(dt_write.length);
        for(var i=0;i<dt_write.length;i++){
            dt_write[i].onclick=function () {
                var newNode = document.createElement("input");
                newNode.setAttribute("type","txt");
                dt_write[i].parentNode.replaceChild(newNode,dt_write[i]);
        }
        }
    }

</script>
</body>
</html>

图片说明

答

for(var i=0;i<dt_write.length;i++)
{
        dt_write[i].onclick=function () 
        {
                var newNode = document.createElement("input");
                newNode.setAttribute("type","txt");
                dt_write[i].parentNode.replaceChild(newNode,dt_write[i]);
        }
}

上面这段代码，当响应dt_write[i].onclick这个事件时，dt_write[i]的定义早就没了，因此dt_write[i].parentNode.replaceChild(newNode,dt_write[i]);这句肯定出错，把dt_write[i]改成this试一下：

for(var i=0;i<dt_write.length;i++)
{
        dt_write[i].onclick=function () 
        {
                var newNode = document.createElement("input");
                newNode.setAttribute("type","txt");
                this.parentNode.replaceChild(newNode,this);
        }
}

答

.pareNode 这个方法写错了吗

答

你再重新测试下，我这儿结果是正常的，按钮功能可以执行，没有报什么错误。

360浏览器/Chrome都通过。

答

并没有报错
谷歌测试了

答

可能是你浏览器问题吧，Chrome没有错！

答

http://ask.csdn.net/questions/367124
你没看昨天的问题？闭包问题啊，你的i是dt_write.length越界了。。

getElementsByClassName返回的是不可以直接增加修改的DOM数组，但是可以通过对dom树节点删除来减少数组项

 dt_write[i].onclick = function () {
   alert(i)//加这句就知道了，输出dt_write.length，并不是当时for变了到的i值
      var newNode = document.createElement("input");
 newNode.setAttribute("type", "text");//这里也搞错了，是text，不是txt
  dt_write[i].parentNode.replaceChild(newNode, dt_write[i]);//这句也有问题，你用input替换掉td，会将td从dom中删除，导致 dt_write数组-1，没生成一个input就-1，及时做闭包得到for的i值也会导致越界。你应该是设置td的innerHTML，而不是替换掉
}

========》

                  dt_write[i].onclick = (function (i) {//////闭包得到当前遍历的i值
                    return function () {
                        dt_write[i].innerHTML = '<input type="text"/>'
                    }
                })(i);//////

答

还没来得及看，正在看闭包的前置基础概念。TAT

答

@伪造的时空这个是正解！

答

<!DOCTYPE html>

new document

<br> td:hover {<br> cursor: pointer;<br> }<br>

学号	姓名

这个问题主要是你的索引没找到，你可以打印i的值，当你执行点击事件时i的值已经是dt_write.length了，所以你获取到的不是你想要的那个元素，所以报错。

答

典型错误：“javascript使用for循环批量注册的事件不能正确获取索引值”

注册事件时i循环没问题，触发事件时，i的值是最终值

可以使用this

dt_write[i].parentNode.replaceChild(newNode,dt_write[i]);用this替换dt_write[i]

用闭包的方式解决，保证索引值一致

for ( ) {
(function(index) {
// 注册事件
})(i)
}
闭包方式能保证索引值一致但dt_write[index]不一定是this，因为其他节点可能已经被imput替换，失去class为write的属性

答

1楼谬解：

dt_write[i].onclick=function () {
    console.log(dt_write[0], i);
    var newNode = document.createElement("input");
    newNode.setAttribute("type","txt");
    dt_write[i].parentNode.replaceChild(newNode,dt_write[i]);
}

运行时会输出dt_write[0], i确实固定值。不是dt_write[i]不存在，而是i索引错误

求大神救命，检查了半天，38行一直报错，头都大了，我感觉逻辑都是对的

相关推荐