Question

我有一些我正在使用的代码，可以根据需要多次克隆div的内容。

原始代码将重命名每个表单字段的名称/ ID。所以第一个克隆名称将是“name1”第二个克隆“name2”等...

问题在于我将表单字段放在div或表中以用于设计目的。

代码不再重命名表单字段，因为它似乎引用了顶部元素，即表或div（取决于我使用的）

以下是代码的简化版本，其中包含此示例所需的所有内容（可以复制到编辑器中并按原样运行。您将看到字段ID未被重命名）：

www.jsbin.com/oyavez/1/edit

   <script type="text/javascript">
var formCounter = 0;

function init() {
    document.getElementById('moreFields').onclick = moreFields;
    moreFields();
}

function moreFields() {
      formCounter++;
        var newFields = document.getElementById('readroot').cloneNode(true);
        newFields.id = '';
    newFields.style.display = 'block';
    var newField = newFields.childNodes;
for (var i=0;i<newField.length;i++) {
        var theName = newField[i].name
    if (theName)
        newField[i].name = theName + formCounter;
}
var insertHere = document.getElementById('writeroot');
insertHere.parentNode.insertBefore(newFields,insertHere);
}

window.onload = moreFields;
</script>

<title>Add Orders IO TOC</title>
</head>
<body>

<!--  Template -->

<div id="readroot" style="display: none">


<table>
<tr><td colspan="2"><h3>Order <script>document.write(formCounter);</script></h2></td></tr>
<tr><td>Order ID: </td><td><input type="text" id="OrderID  name="OrderID[]" ></input></td>
<td>Order Name: </td><td><input type="text" id="OrderName" name="OrderName[]" ></input></td>

</table>
<br /><br /><input type="button" value="Remove Above Order" style="width:200px;"  onclick="this.parentNode.parentNode.removeChild(this.parentNode);" /><br /><br />

<!-- ROW -->

</div>

<!--  END Template -->

<!-- Start of form -->
<form method="get" action="form.php">

<table>
<tr><td align="center" colspan="2"><h2>Contract</h2></td></tr>
<!-- Static part of the form not to be cloned -->

 <tr><td>Contract: </td><td><input type="text" id="Contract" name="Contract" ></input></td>
 <td>Signed Date: </td><td><input type="text" id="datepicker0" name="SignedDate" ></input></td>

 <tr><td align="center" colspan="2"><h2>Orders</h2></td></tr>

</table>

<!-- ROW -->

<!-- Cloned parts of the form appear here -->


<span id="writeroot"></span>
<table>
<tr><td align="center" >    <input type="button" style="width:200px;" value="Add another order     below" onclick="moreFields()" /></td>
<td align="center" ><input type="submit" value="Submit IO and all Orders" style="width:200px;"  ></td></tr>

</table>

</form>

任何人都知道如何找到桌子上的孩子吗？

谢谢！

使用javascript克隆 - 重命名表格中表单元素的ID

0 个答案: