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

看起来你在正确的轨道上，但我认为你采取了一些额外的步骤，所以我想我简化了它;）

您缺少的一件事是 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 回答