动态添加HTML元素

Question

我写了一个脚本，可以动态添加HTML元素，但这里的问题是这些元素的值也是动态创建的，下面是脚本

$(document).ready(function(){
$("#noOfSegments").change(function(){
var counter=$("#noOfSegments").val();
for(i=1; i<=counter; i++){
var row = $("<tr><td>"+i+"</td><td><input type='text' name='segmentName"+i+"'></input></td><td><select name='dataType"+i+"'><option value='0'>0</option><option value='1'>1</option></select></td><td><select name='dataType"+i+"'><option value='0'>0</option><option value='1'>1</option></select></td><td><input type='checkbox' name='mandatoryFlag"+i+"'></td></tr>");
$("#segmentTable").append(row);
}
var rowcount = $("#segmentTable tr").length;
while (rowcount > counter) {
$("#segmentTable tr:last-child").remove();
rowcount = $("#segmentTable tr").length;
  }
 });
});

其中我的$("#noOfSegments")是一个带有选项值1,2和3的select。当我首先选择选项3时，它给我的"+i+“是1,2和3，但是当我首先选择选项1和选项2时，它给我1，1代表"+i+”，如果我选择选项1，然后选择选项3，它给我1,1,2，你们能帮我解决这个问题吗？

Answer 1

在添加新节点之前，您应该对所有<tr>节点执行$("#segmentTable tr").remove()操作。

Here's an edited fiddle.

您的代码是这样的:您在表的末尾添加了X个新节点，然后从表的末尾开始删除X个节点，实质上是删除了刚刚添加的一些节点。在添加新节点之前，您应该从表的顶部删除节点或删除所有节点(我在小提琴中做了这一点)。