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

Question

<table class="table-condensed" id="tableCondensed" border="0" cellpadding="2" cellspacing="0">
    <thead>
        <tr>
            <th>规格名称</th>
            <th>规格明细</th>
            <th>规格价格</th>
            <th>库存数量</th>
            <th>规格图片</th>
            <th>操作方式</th>
        </tr>
    </thead>
    <!--这是js复制表格模板。-->
    <tbody>
        <tr>
            <td>
                <input type="text" value="" placeholder="(比如: 颜色)">
            </td>
            <td>
                <input type="text" value="" placeholder="(比如: 颜色)">
            </td>
            <td>
                <input type="text" value="" placeholder="(比如: 颜色)">
            </td>
            <td>
                <input type="text" value="" placeholder="(比如: 颜色)">
            </td>
            <td>
                <input type="file" />
            </td>
            <td>
                <ul>
                    <li><a href="javascript:;" onclick="removeSpecItem()">删除</a></li>
                </ul>
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <input type="text" value="" placeholder="(比如: 颜色)">
            </td>
            <td>
                <input type="text" value="" placeholder="(比如: 颜色)">
            </td>
            <td>
                <input type="text" value="" placeholder="(比如: 颜色)">
            </td>
            <td>
                <input type="file" />
            </td>
            <td>
                <ul>
                    <li><a href="javascript:;" class="add-specitem" onclick="addDetail()">增加</a></li>
                    <li><a href="javascript:;" onclick="removeDetail()">删除</a></li>
                </ul>
            </td>
        </tr>
        </tbody>
        <!--上面是js复制表格模板。-->
<tbody>
        <tr>
            <td>
                <input type="text" value="" placeholder="(比如: 颜色)">
            </td>
            <td>
                <input type="text" value="" placeholder="(比如: 颜色)">
            </td>
            <td>
                <input type="text" value="" placeholder="(比如: 颜色)">
            </td>
            <td>
                <input type="text" value="" placeholder="(比如: 颜色)">
            </td>
            <td>
                <input type="file" />
            </td>
            <td>
                <ul>
                    <li><a href="javascript:;" onclick="removeSpecItem()">删除</a></li>
                </ul>
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <input type="text" value="" placeholder="(比如: 颜色)">
            </td>
            <td>
                <input type="text" value="" placeholder="(比如: 颜色)">
            </td>
            <td>
                <input type="text" value="" placeholder="(比如: 颜色)">
            </td>
            <td>
                <input type="file" />
            </td>
            <td>
                <ul>
                    <li><a href="javascript:;" class="add-specitem" onclick="addDetail()">增加</a></li>
                    <li><a href="javascript:;" onclick="removeDetail()">删除</a></li>
                </ul>
            </td>
        </tr>
        </tbody>
                                    </table>

    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。
点击链接

Answer 1

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>

Answer 2

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

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

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

以第一个函数为例，

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();
            });
        }
    })()
}

Answer 3

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

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

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

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

4.等等。。。

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