![](/img/trans.png)
[英]add input button to add input field onclick and increase number (value ) of each input field each time adding
[英]OnClick of button, Increase div it giving dynamic ID to each field in javascript
我有一个场景,用户点击button
可以添加12
div与相同的HTML
。 相同的html如下
<div id="dvNPEAddData">
<div id="dvNPEInnerData">
<label>Terminated route name</label>
<input type="text" id="txtTerRouteName" />
<label>Cable Type</label>
<select id="ddlCableType">
<option value="--Select--">--Select--</option>
<option value="G652">G652</option>
<option value="G655">G655</option>
</select>
<label>Cable Size</label>
<select id="ddlCableSize">
<option value="--Select--">--Select--</option>
<option value="12F">12F</option>
<option value="24F">24F</option>
<option value="48F">48F</option>
</select>
<label>No of Live Fibre</label>
<input type="text" id="txtNoLiveFibre" />
</div>
</div>
按钮也在下面,上面的整个div将通过动态ID再次创建
<label>ADD NPE +</label>
<input type="button" id="btnAddNPE" value="Add NPE" onclick="addNPEInfo()" />
所以为此,我尝试了类似下面的东西..!
var div = document.getElementById('dvNPEInnerData'),
clone = div.cloneNode(true);
clone.id = "dvNPEInnerData1";
//document.body.appendChild(clone);
document.getElementById('dvNPEAddData').appendChild(clone);
正确生成div,但问题是每个控件的ID
,如input = text
和select
未生成。
那么我应该如何使用它以便它可以生成具有动态
ID's
相同html
请尝试以下代码。
var appendNewId=1;
function addNPEInfo(){
if(appendNewId>12){
alert("Maximum 12 rows allowed");
return;
}
var div = document.getElementById('dvNPEInnerData'),
clone = div.cloneNode(true);
appendId(clone, "div", appendNewId);
appendId(clone,"select", appendNewId);
appendId(clone,"input", appendNewId);
appendId(clone,"label", appendNewId);
clone.id = "dvNPEInnerData"+appendNewId;
//document.body.appendChild(clone);
document.getElementById('dvNPEAddData').appendChild(clone);
appendNewId++;
}
function appendId(clone,tag, id){
var ele = clone.getElementsByTagName(tag);
for(i in ele){
ele[i].id = ele[i].id+id;
}
}
根据您的需要更改appendNewId的值。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.