Question

在下面的代码中，它可以很好地克隆表，但它不够深入，无法重命名表中每个表单字段的输入。例如Attendee1，Attendee2，Attendee3等

有没有办法，只需抓住NewEl.children找到表中的所有输入元素然后重命名它们？

我不想添加一行，我需要克隆整个表。

对于你们在cyberland所提出的任何帮助都会非常感激。

<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>

Answer 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上的工作副本。

P.S。我不确定你是否希望新字段清除，所以我离开了它们。

使用Javascript在表中发布克隆表单字段

1 个答案: