jQuery 使用Javascript创建动态输入id
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19994281/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Use Javascript to create dynamic input id
提问by proPhet
I want to use javascript to create <input/>tags with a dynamic id(nameattribute will be the same) depending on the order in which they appear.
我想使用 javascript 来创建<input/>具有动态标签id（name属性将相同），具体取决于它们出现的顺序。
I have the first <input/>tag in plain html and a div that should append a new <input/>with an incremented id when clicked:
我有<input/>纯 html 中的第一个标签和一个 div，<input/>单击时应该附加一个带有递增 id的新标签：
<input type="text" name="1" id="1" />
<div class="add_new" onClick="add_new_input()">+</div>
Now, the javascript needs to count the amount of <input/>s currently being displayed (count) and use that amount to generate a dynamic id(count+1).
现在，javascript 需要计算<input/>当前显示的s数量（count）并使用该数量生成动态id（count+1）。
Therefore if the <div class="add_new"><..is clicked twice, the output should be as follows:
因此，如果<div class="add_new"><..单击两次，则输出应如下所示：
<input type="text" name="1" id="1" />
<input type="text" name="2" id="2" />
<input type="text" name="3" id="3" />
If I append the new <input/>tag in my form using jquery's append(), would this add to the previously appended <input/>s? Or would I need to append one <input/>, then two, then three, etc?
如果我<input/>使用 jquery's 在我的表单中附加新标签append()，这会添加到之前附加的<input/>s 吗？或者我需要附加一个<input/>，然后是两个，然后是三个，等等？
Also, how can I use javascript to count the amount of <input/>s currently being displayed?
另外，如何使用 javascript 计算<input/>当前显示的s数量？
回答by Roopendra
I had used script which is fit in your requirement .
我使用了符合您要求的脚本。
Html:
网址：
<h2><a href="#" id="addScnt">Add Another Input Box</a></h2>
<div id="p_scents">
<p>
<label for="p_scnts">
<input type="text" id="p_scnt" size="20" name="p_scnt" value="" placeholder="Input Value" />
</label>
</p>
</div>
Javascript :-
Javascript :-
$(function () {
var scntDiv = $('#p_scents');
var i = $('#p_scents p').size() + 1;
$('#addScnt').live('click', function () {
$('<p><label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt_' + i + '" value="" placeholder="Input Value" /></label> <a href="#" id="remScnt">Remove</a></p>').appendTo(scntDiv);
i++;
return false;
});
$('#remScnt').live('click', function () {
if (i > 2) {
$(this).parents('p').remove();
i--;
}
return false;
});
});
回答by Gautam3164
Try like
试试像
function add_new_input() {
var last_id = $('input[type="text"]:last').attr('id');
last_id++;
$('input[type="text"]:last').append('<input type="text" name="'+last_id+' id="'+last_id+'">');
}
回答by Ravi
Try this
尝试这个
function add_new_input(){
var lastControlId = $('input:text:last').attr('id');
if(!lastControlId){
lastControlId = parseInt(lastControlId,10) + 1;
$('#containerDiv').append('<input type="text" name="'+ lastControlId +' id="'+ lastControlId +'">');
}
}
回答by Sindhu
jQuery('#select').change(function () {
var val = jQuery(this).val();
var innerhtml = '';
for (var i = 0; i < val; i++) {
innerhtml += "<input type='text' id='" + (i + 1) + "' name='" + (i + 1) + "'size=50> </br>";
}
jQuery('#textbox_div').html(innerhtml);
});
回答by hangman
using plain javascript
使用普通的 javascript
<script language="javascript">
var x=1;
function add_new_input(){
x++;
var input=document.createElement('input');
input.setAttribute("id",x);
input.setAttribute("type","text");
document.getElementById("holder").appendChild(input);
}
</script>
html is below
html在下面
<div id="holder">
<input type="text" name="1" id="1" />
</div>
<div class="add_new" onClick="add_new_input()" >+</div>
回答by Sanjay
var index = 1;
function add_fields() {
index++;
var objTo = document.getElementById('room_fileds')
var divtest = document.createElement("tr");
divtest.innerHTML = ("<tr><td class='slno'>" + index + "</td><td><input type='text'></td><td><button class='remove_button' onclick='myfn()'>remove</button></td></tr>");
objTo.appendChild(divtest);
$(".slno").each(function(index, element) {
$(element).text(index + 1);
});
}
function myfn() {
$(".remove_button").parents('tr').first().remove();
$(".slno").each(function(index, element) {
$(element).text(index + 1);
});
}
回答by Anatoli
$( "input" ).each(function( index ) {
$(this).attr('id', 'item-' + index);
});
This should alter all inputs with id of "item-[index number]".
这应该会更改 ID 为“item-[index number]”的所有输入。
But you should throw in .class identification to selector so this doesn't apply to all.
但是您应该将 .class 标识放入选择器中，因此这不适用于所有情况。
