使用 here 中的 jQuery 代码，但我试图在每个 div 中有多个文本输入。它正确显示并递增并保存第一个元素的名称和 id，但对于第二个年龄输入，它仅存储第一个输入。
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#btnAdd').click(function() {
var num = $('.clonedInput').length;
var newNum = new Number(num + 1);
var newElem = $('#input' + num).clone().attr('id', 'input' + newNum);
newElem.children(':first').attr('id', 'name' + newNum).attr('name', 'name' + newNum);
$('#input' + num).after(newElem);
$('#btnDel').attr('disabled','');
if (newNum == 5)
$('#btnAdd').attr('disabled','disabled');
});
$('#btnDel').click(function() {
var num = $('.clonedInput').length;
$('#input' + num).remove();
$('#btnAdd').attr('disabled','');
if (num-1 == 1)
$('#btnDel').attr('disabled','disabled');
});
$('#btnDel').attr('disabled','disabled');
});
</script>
</head>
<body>
<form id="myForm">
<div id="input1" style="margin-bottom:4px;" class="clonedInput">
Name: <input type="text" name="name1" id="name1" />
</div>
<div>
<input type="button" id="btnAdd" value="add another name" />
<input type="button" id="btnDel" value="remove name" />
</div>
</form>
</body>
</html>
这是我的新表单和 jQuery 代码的样子。
<form id="myForm">
<div id="input1" style="margin-bottom:4px;" class="clonedInput">
Name: <input type="text" name="name1" id="name1" />
Age: <input type="text" name="age1" id="age1" />
</div>
<div>
<input type="button" id="btnAdd" value="add another name" />
<input type="button" id="btnDel" value="remove name" />
</div>
newElem.children(':first')
.attr('id', 'age' + newNum)
.attr('name', 'age' + newNum);
最佳答案
您的脚本仅更新第一个输入，您需要循环并更新克隆 div 中的所有输入
$('#btnAdd').click(function () {
var num = $('.clonedInput').length;
var newNum = num + 1;
var newElem = $('#input' + num).clone().attr('id', 'input' + newNum);
newElem.find(':input').each(function () {
$(this).attr('id', $(this).attr('id').replace(/\d+/, newNum));
$(this).attr('name', $(this).attr('name').replace(/\d+/, newNum));
});
$('#input' + num).after(newElem);
$('#btnDel').attr('disabled', '');
if (newNum == 5) $('#btnAdd').attr('disabled', 'disabled');
});
关于javascript - 具有 jQuery 动态表单的单个 div 中的多个文本字段，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17954384/