使用Javascript发布表中的克隆表单字段
Issue Cloning Form Fields Within Table with Javascript
在下面的代码中,克隆表非常有效,但它还不够深入,无法重命名表中每个表单字段的输入。例如Attendee1、Attendee2、Attendee3等
除了抓取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>
<input type="checkbox" name="Paid" value="Yes" size="25">
</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>
<input type="text" name="PaidWhen" value="" size="10">
</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>
看起来你走在了正确的轨道上,但我认为你多走了几步,所以我认为我简化了它;)
您缺少的一件事是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的工作副本。
附言:我不确定你是否想清理新的田地,所以我离开了。
相关文章:
- 通过单击动态加载的表中同一行的另一个字段来更新一行的字段
- 添加和删除隐藏字段数组中的值,而不提交表单
- 单击鼠标,用MySQL数据填充html表单输入字段
- 带有条件字段的PHP表单
- 验证PDF表单中的字段
- HTML提交表单,同时包含空字段检查和按钮隐藏
- 在表单中的输入字段上提交事件
- 当所有输入文本字段都为空时,禁止表单提交,但当jquery中的任何字段不为空时允许提交
- 表单输入字段随着溢出的文本而增长
- 如何将onChange方法添加到ExtJS 4表单中的所有字段(textField)中
- 尝试使用名称访问表中字段的日期选取器时出现问题
- Javascript 表单 - 字段不是必需的
- 单击按钮时更改数据库表的字段值
- 数据表将字段值关联到按钮,而 ajax 填充表
- 返回数据表输入字段
- 更改附加表行字段jQuery的名称
- Angularjs表单/字段验证使用JavaScript函数,无需指令
- 仅在Firefox中,表脱离字段集边界
- 如何在表单提交后使用JQuery从附加到HTML表的字段中获取$_POST数组中的值
- 什么's提交表单后,从post数组中动态附加的表行字段中获取值的问题