【发布时间】：2019-04-17 10:03:38
【问题描述】：
我有用户应该能够添加新行的地方。我的逻辑工作正常，所有新字段都变得唯一 id's 和 names 但是当我删除除最后一行之外的任何其他行时会出现问题。这是我的代码示例：
$("#add_row").on('click', addRow);
function addRow() {
var index = $(".data-list").children('div').length + 1;
console.log(index);
$('.data-list').append(
'<div class="form-group required data-item">' +
'<label class="control-label" for="colddesc"><span class="label label-default">Column & Description:</span></label>' +
'<div class="row">' +
'<div class="col-xs-12 col-sm-12 col-md-2 col-lg-2">' +
'<select class="form-control" name="frm_column' + index + '" id="frm_column' + index + '" required>' +
'<option value="">--Choose--</option>' +
'<option value="1">Record ID</option>' +
'<option value="2">Name</option>' +
'<option value="3">Year</option>' +
'</select>' +
'</div>' +
'<div class="col-xs-12 col-sm-12 col-md-10 col-lg-10">' +
'<div class="input-group">' +
'<input class="form-control" type="text" name="frm_descr' + index + '" id="frm_descr' + index + '" placeholder="Enter Description" required>' +
'<span class="input-group-btn">' +
'<button class="btn btn-danger btn-remove" type="button"><span class="glyphicon glyphicon-remove"></span></button>' +
'</span>' +
'</div>' +
'</div>' +
'</div>' +
'</div>'
);
};
$(document.body).on('click', '.btn-remove', function() {
$(this).closest('.data-item').remove();
});<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="data-section">
<div class="row">
<div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
<button type="button" class="btn" name="add_row" id="add_row">
<span class="glyphicon glyphicon-plus-sign"></span> Add Row
</button>
</div>
</div>
<div class="data-list">
<div class="form-group required data-item">
<label class="control-label" for="coldesc"><span class="label label-default">Column & Description:</span></label>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-2 col-lg-2">
<select class="form-control" name="frm_column1" id="frm_column1" required>
<option value="">--Choose--</option>
<option value="1">Record ID</option>
<option value="2">Name</option>
<option value="3">Year</option>
</select>
</div>
<div class="col-xs-12 col-sm-12 col-md-10 col-lg-10">
<input class="form-control" type="text" name="frm_descr1" id="frm_descr1" placeholder="Enter Description" required>
</div>
</div>
</div>
</div>
</div>如果我再添加两行（总行数 3）并删除第二行，那么下次当用户单击 Add Row 时，索引将从 3 开始，并且该索引已经存在。我想知道如何解决这个问题？有没有从最后一个最高数字开始索引的好方法？
【问题讨论】：
-
为什么不保留一个计数器并从那里开始呢？毕竟，您只需要它是独一无二的吗？
-
@AlainCruz 我想知道保持计数器索引的最佳方法是什么？是的，我只需要每个索引都是唯一的。
-
好吧，我只保留一个分配了最后一个 id 的 var。每次你添加一个新的，我都会添加一个。
-
@AlainCruz 你能举个例子吗？谢谢。
-
我刚做了。希望这能解决您的问题。
标签： javascript jquery indexing