0

以下のコードでは、テーブルのクローンを作成するのはうまく機能しますが、テーブル内の各フォーム フィールドの入力の名前を変更するには十分ではありません。たとえば、出席者 1、出席者 2、出席者 3 などです。

NewEl.children を取得する代わりに、テーブル内のすべての入力要素を見つけて名前を変更する方法はありますか?

行を追加しようとしているのではなく、テーブル全体を複製する必要があります。

サイバーランドで皆さんが提供できる支援は、大歓迎です。

<form name="EditRoster" method="post" action="DoRoster.php">
    <table id="RosterTbl" cellspacing="0" cellpadding="2">
        <tr style="text-align:left;vertical-align:top;">
            <td><b>Name</b>:</td>
            <td>
                <input type="text" name="Attendee" value="" size="25" onclick="alert(this.name)">
            </td>
            <td><b>Paid</b>:</td>
            <td>&nbsp;
                <input type="checkbox" name="Paid" value="Yes" size="25">&nbsp;
            </td>
        </tr>
        <tr style="text-align:left;vertical-align:top;">
            <td><b>Email</b>:</td>
            <td>
                <input type="text" name="Email" value="" size="25">
            </td>
            <td><b>Paid When</b>:</td>
            <td>&nbsp;
                <input type="text" name="PaidWhen" value="" size="10">&nbsp;
            </td>
        </tr>
    </table>
    <div style="padding:5px;">
        <input type="hidden" name="NumStudents" value="0">
        <input type="button" name="AddPersonButton" value="Add Person" onclick="CloneElement('RosterTbl','NumStudents');">
    </div>
</form>

<script language="javascript">

var TheForm = document.forms.EditRoster;

function CloneElement(ElToCloneId, CounterEl) {
    var CloneCount = TheForm[CounterEl].value;
    CloneCount++;
    TheForm[CounterEl].value = CloneCount;

    var ElToClone = document.getElementById(ElToCloneId);

    var NewEl = ElToClone.cloneNode(true);
    NewEl.id = ElToCloneId + CloneCount;
    NewEl.style.display = "block";

    var NewField = NewEl.children;
    for (var i = 0; i < NewField.length; i++) {
        var InputName = NewField[i].name;
        if (InputName) {
            NewField[i].name = InputName + CloneCount;
        }

        var insertHere = document.getElementById(ElToCloneId);
        insertHere.parentNode.insertBefore(NewEl, insertHere);
    }
}

</script>
4

1 に答える 1

0

あなたは正しい方向に進んでいるように見えましたが、いくつかの追加の手順を踏んでいたと思うので、単純化したと思います;)

見逃していたことの 1 つは、NumStudents の値が文字列として返されるため、それを呼び出す必要があるparseInt()ことです。

var theForm = document.forms.EditRoster;

function insertAfter(referenceNode, newNode) {
    referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}

function CloneElement(cloneID, counterName) {
    var clone = document.getElementById(cloneID);
    var newClone = clone.cloneNode(true);
    var counter = theForm[counterName].value = parseInt(theForm[counterName].value) + 1;

    // Update the form ID
    newClone.id = newClone.id + counter;

    // Update the child Names
    var items = newClone.getElementsByTagName("*");
    for (var i = 0; i < items.length; i++) {
        if (items[i].name != null)
            items[i].name = items[i].name + counter;
    }

    insertAfter(clone, newClone);
}

これはjsFiddleの作業コピーです。

Ps 新しいフィールドをクリアするかどうかわからなかったので、そのままにしておきました。

于 2013-08-28T03:11:14.510 に答える