javascript - 当浏览器完成加载之后，点击“增加”或者“删除”交互不正常，点击一次则多几行，而点击删除有时候无效，也可以删除。-PHP中文网问答

    function removeDetail(){
        var tableDody = document.getElementById("tableCondensed").getElementsByTagName("tr");
        for(i=1;i<=tableDody.length-1;i++){
            tableDody[i].addEventListener("click", function(){
                this.remove();
            });
        }
    }

    function removeSpecItem(){
        var tableDody = document.getElementById("tableCondensed").getElementsByTagName("tbody");
        for(i=1;i<=tableDody.length-1;i++){
            tableDody[i].addEventListener("click", function(){
                this.remove();
            });
        }
    }

    function addDetail() {
        var tableTr = document.getElementById("tableCondensed").getElementsByTagName("tbody")[0].getElementsByTagName("tr")[1];
        var tableTr2=tableTr.cloneNode(true);
        var tableDody = document.getElementById("tableCondensed").getElementsByTagName("tbody");
        for(i=1;i<=tableDody.length;i++){
            tableDody[i].addEventListener("click", function(){
                this.appendChild(tableTr2);
            });
        }
    }

    function addSpecitem(){
        var tableTr = document.getElementById("tableCondensed").getElementsByTagName("tbody")[0];
        var tableTr2=tableTr.cloneNode(true);
        var tableAddtbody = document.getElementById("tableCondensed");
        tableAddtbody.appendChild(tableTr2);
    }

当浏览器完成加载之后，点击“增加”或者“删除”交互不正常，点击一次则多几行呀，点击删除有时候无效，也可以删除。
浏览器colose警告提示：Uncaught TypeError: Cannot read property 'addEventListener' of undefined。
点击链接

function removeDetail() { var tableDody = document.getElementById("tableCondensed").getElementsByTagName("tr"); (function() { for (var i = 1; i <= tableDody.length - 1; i++) { tableDody[i].addEventListener("click", function() { this.remove(); }); } })() }

全部回复(3)

巴扎黑2017-04-10 17:20:25 3楼

insertRow() 插入行
deleteRow() 删除行
wcschool上有介绍

删除

1		删除
2		删除
3		删除
4		删除

添加
<script>
var oTb = document.getElementById('tb');
var aA = oTb.getElementsByTagName('a');

console.log(oTb.rows[1]);

for(var i=0; i<aA.length; i++)
{

aA[i].index = i;

aA[i].onclick = function()
{
    oTb.deleteRow(this.index)
    console.log(this.index)
    
}

}

</script>

赞 +0

添加回复

怪我咯2017-04-10 17:20:25 2楼

推荐你好好看一下闭包那一块

至于解决办法，如果浏览器支持 es6 所有 for 循环都这么写

for (let i=0;i<tableDoay.length;i++) {} 不支持的话，就用一个自执行函数。

以第一个函数为例，

黄舟2017-04-10 17:20:25 1楼

嗯，，题主这个问题很多啊。

1.每次点击添加或者删除都会给所有元素绑定事件。

2.绑定事件的函数也没有阻止冒泡，冒泡到tbody上又会触发你绑定的事件。。。

3.而且添加和删除也都绑在了tbody，那不就是添加了又删除么。。。

4.等等。。。

建议重新理理逻辑重写吧。。。。

规格名称	规格明细	规格价格	库存数量	规格图片	操作方式
					删除
					增加删除
					删除
					增加删除