【发布时间】：2020-01-19 11:57:37
【问题描述】：
我使用以下代码，为了复制表单的输入并生成新的 id 名称，它工作正常，但我需要在具有 clonedSection1 ID 的 div 之后添加两个带类的 div，然后它就不再工作了，我需要更改脚本中的某些内容吗？还是那些 div 会阻止正常运行，我需要删除它们？
这是我的代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-1.4.2.js" type="text/javascript"></script>
</head>
<body>
<form id="myForm">
<div id="clonedSection1" class="clonedSection">
<!-- here goes <div class="container contain2 marco">
<div class="row row-centered ">-->
<p>Name: <input type="text" name="name" id="name" /></p>
<p>Product Description:</p>
<p><textarea rows="10" cols="50" name="desc" id="desc"></textarea></p>
<p>Brand Name: <input type="text" name="brand" id="brand" /></p>
<p>Product Code Number: <input type="text" name="code" id="code" /></p>
<p>West Texas Co-op Bid Product Number (if different from the Product Code Number): <input type="text" name="coop" id="coop" /></p>
<p>Commodity processing availability: <input type="checkbox" name="yes" id="yes" value="Yes"> Yes <input type="checkbox" name="no" id="no" value="No"> No</p>
<p>Commodity processing code number (if applicable): <input type="text" name="comm" id="comm" /></p>
<!--
</div>
</div> -->
</div>
<div>
<input type="button" id="btnAdd" value="add another name" />
<input type="button" id="btnDel" value="remove name" />
</div>
</form>
<script type="text/javascript">
$(document).ready(function() {
$("#btnAdd").click(function() {
var num = $(".clonedSection").length;
var newNum = new Number(num + 1);
var newSection = $("#clonedSection" + num).clone().attr("id", "clonedSection" + newNum);
newSection.children(":first").children(":first").attr("id", "name" + newNum).attr("name", "name" + newNum);
newSection.children(":nth-child(3)").children(":first").attr("id", "desc" + newNum).attr("name", "desc" + newNum);
newSection.children(":nth-child(4)").children(":first").attr("id", "brand" + newNum).attr("name", "brand" + newNum);
newSection.children(":nth-child(5)").children(":first").attr("id", "code" + newNum).attr("name", "code" + newNum);
newSection.children(":nth-child(6)").children(":first").attr("id", "coop" + newNum).attr("name", "coop" + newNum);
newSection.children(":nth-child(7)").children(":first").attr("id", "yes" + newNum).attr("name", "yes" + newNum);
newSection.children(":nth-child(7)").children(":nth-child(2)").attr("id", "no" + newNum).attr("name", "no" + newNum);
newSection.children(":nth-child(8)").children(":first").attr("id", "comm" + newNum).attr("name", "comm" + newNum);
$(".clonedSection").last().append(newSection)
$("#btnDel").attr("disabled","");
if (newNum == 5)
$("#btnAdd").attr("disabled","disabled");
});
$("#btnDel").click(function() {
var num = $(".clonedSection").length; // how many "duplicatable" input fields we currently have
$("#clonedSection" + num).remove(); // remove the last element
// enable the "add" button
$("#btnAdd").attr("disabled","");
// if only one element remains, disable the "remove" button
if (num-1 == 1)
$("#btnDel").attr("disabled","disabled");
});
$("#btnDel").attr("disabled","disabled");
});
</script>
</body>
<script src="http://code.jquery.com/jquery-1.4.2.js" type="text/javascript"></script>
</html>
我发现脚本正在我需要生成的第二个 div 中创建新 id
<div class="row row-centered " id="name2" name="name2">
所以我认为我肯定需要更改脚本中的某些内容，应该是什么？
【问题讨论】：
-
你需要这些 id 做什么？
标签： javascript html arrays forms var