如何将具有自动递增id的表单元素克隆到所有元素
如何将具有自动递增id的表单元素克隆到所有元素
提问于 2017-12-20 18:36:45
我在a下面有一张表格。我想克隆它，并动态地添加到另一个中，依此类推。另外，我也需要分配自动递增的id给所有的表单元素。除了纯javascript之外，我不能使用任何jQuery或其他库。
这是我的HTML
<tr id="repeat">
<td><input type="text" id="fieldName" /></td>
<td>
<select name="fieldType" id="fieldType">
<option value="string">String</option>
</select>
</td>
<td><input type="radio" id="mandatory" name="mandatory" value="true" /><input type="radio" id="mandatory" name="mandatory" value="false" /></td>
<td>Delete Button</td>
</tr>这是我的JavaScript
var i = 0;
this.view.findById("start").addEventHandler("click", function () {
var original = document.getElementById('repeat');
var clone = original.cloneNode(true);
original.parentNode.appendChild(clone);
})目前，我可以动态克隆<tr id="repeated1">中的表单元素，等等，但不能将自动递增的id分配给输入框和选择框。也无法动态地为单选按钮指定自动递增的名称
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-12-20 19:06:43
您可以根据需要更改Id或其他属性。
但是对于你的代码，我的解决方案是使用querySelectorAll来获取元素并更改它的Id，就像下面的代码一样，它经过了测试，效果很好：
基于此HTML设计代码和JS函数：
function MakeElementsWithDifferentId() {
for (var i = 1; i < 10; i++) {
var original = document.getElementById('repeat');
var clone = original.cloneNode(true);
clone.id="repeat"+i;
clone.querySelectorAll('[id="fieldName"]')[0].id ="fieldName"+i;
clone.querySelectorAll('[id="fieldType"]')[0].id ="fieldType"+i;
clone.querySelectorAll('[id="mandatory"]')[0].id ="mandatory"+i;
clone.children[2].children[0].name="mandatoryName"+i; //To change the radio name also
original.parentNode.appendChild(clone);
}
}
MakeElementsWithDifferentId(); <table>
<tr id="repeat">
<td><input type="text" id="fieldName" /></td>
<td>
<select name="fieldType" id="fieldType">
<option value="string">String</option>
</select>
</td>
<td><input type="radio" id="mandatory" name="mandatory" value="true" /> </td>
<td>Delete Button</td>
</tr>
</table>
MakeElementsWithDifferentId()函数生成10个具有不同Ids批处理元素。
the JSFiddle Test
运行后，您可以右键单击所需的元素并查看Id by inspect元素。
注意：
与clone.querySelectorAll('[id="fieldName"]')[0]相比，更好的方法是像clone.querySelector('[id="fieldName"]')一样通过querySelector获取元素
希望能帮到你。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/47904040
复制相关文章
相似问题
腾讯云开发者
