0

私の質問をよりよく理解し、コードを確認するには、フィドルにアクセスしてください: http://jsfiddle.net/dnyXC/

アイコンをクリックできるスクリプト（以下）があり、テーブルが複製され、含まれているフォームでより多くの入力が可能になります。この問題は、アイコンを 1 回クリックして複製すると、位置に関係なくテーブルをクリックすると、テーブルが再び複製されることです。

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>

無限の複製は問題ありません。問題は、フォームに別の項目を入力すると、テーブルが複製されることです。テーブルを複製する唯一の方法は、プラス アイコンをクリックすることです。

私の質問をよりよく理解し、コードを確認するには、フィドルにアクセスしてください: 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 に答える