0

为了更好地理解我的问题并查看代码，请访问 FIDDLE：http: //jsfiddle.net/dnyXC/

我有一个脚本（如下），允许您单击一个图标并复制表格，允许在包含的表单上进行更多输入。这个问题是，一旦您单击一次图标以复制它，无论位置如何，您单击表格的任何位置都会再次复制表格。

document.getElementById('line-duplicate').onclick = duplicate;
    var i = 0;

        function duplicate() {
            var original = document.getElementById('item-table' + i);
            var clone = original.cloneNode(true); // "deep" clone
            clone.id = "item-table" + ++i; // there can only be one element with an ID
            clone.onclick = duplicate; // event handlers are not cloned
            original.parentNode.appendChild(clone);
        }

这是表格的html：

<table class="table" id="item-table0">
<tr>
    <td>Item Name</td>
    <td>Qty/Hrs</td>
    <td>Rate</td>
    <td>Tax Rate</td>
    <td>Type</td>
    <td>Cost</td>
    <td>Actions</td>
</tr>
<tr>
    <td>
        <input class="input-medium" type="text" name="" />
    </td>
    <td>
        <input class="input-mini" type="text" name="" placeholder="1" />
    </td>
    <td>
        <input class="input-mini" type="text" name="" placeholder="0.00" />
    </td>
    <td></td>
    <td>
        <select class="input-small" name="">
            <option>Standard</option>
            <option>Expense</option>
        </select>
    </td>
    <td>$0.00</td>
    <td><i class="icon-plus" style="cursor:pointer;" id="line-duplicate"></i>  <i class="icon-trash pull-right"></i>
        </a>
    </td>
</tr>

无休止的重复很好，问题是当你在表格中输入另一个项目时，你复制了表格。我需要它，以便复制表格的唯一方法是单击加号图标。

为了更好地理解我的问题并查看代码，请访问 FIDDLE：http: //jsfiddle.net/dnyXC/

4

1 回答 1

1

问题是您onclick将整个重复行的 绑定到duplicate()函数。

您应该创建line-duplicate一个类（具有多个具有相同 ID 的元素是一件坏事），并使用document.getElementsByClassName('line-duplicate')函数内部和外部将重复函数绑定到具有该类名称的每个元素，如下所示：

document.getElementsByClassName('line-duplicate')[0].onclick = duplicate;

var i = 0;

function duplicate() {
    var original = document.getElementById('item-table' + i);
    var clone = original.cloneNode(true); // "deep" clone
    clone.id = "item-table" + ++i; // there can only be one element with an ID
    original.parentNode.appendChild(clone);
    var listOfLineDuplicateItems = document.getElementsByClassName('line-duplicate'); // this must be after the table has been appended to the DOM
    for (var j = 0; j < listOfLineDuplicateItems.length; ++j) {
        listOfLineDuplicateItems[i].onclick = duplicate;
    }
}

这是一个JSFiddle。

于 2013-05-19T03:30:15.630 回答