我正在使用此线程中的脚本。问题是当我删除一行时，数字不会自动重新排序。var i = 1;$('#addRow').click(function() { i++; $('#
线程 中的脚本 。问题是当我删除一行时，数字不会自动重新排序。
var i = 1;
$('#addRow').click(function() {
i++;
$('#dynamic_field').append('<div class="row">' +
'<div class="col-lg-1"><div class="form-group" id="row_num' + i + '"><input type="text" name="requisitionNo[]" class="form-control reqrow" value="' + i + '" readonly></div></div>' +
'<div class="col-lg-7"><div class="form-group"><input type="text" name="requisitionDetails[]" class="form-control"></div></div>' +
'<div class="col-lg-1"><div class="form-group"><input type="text" name="itemPrice[]" class="form-control"></div></div>' +
'<div class="col-lg-1"><div class="form-group"><input type="text" name="itemQuantity[]" class="form-control"></div></div>' +
'<div class="col-lg-1"><div class="form-group"><input type="text" name="itemTotal[]" class="form-control"></div></div>' +
'<div class="col-lg-1"><div class="form-group"><button type="button" id="delRow"><i class="fas fa-trash-alt"></i></button></div></div>' +
'</div>');
});
$(document).on('click', '#delRow', function() {
$(this).closest(".row").remove();
$('input.reqrow').each(function(index) {
$(this).find("input.reqrow").html('<input type="text" name="requisitionNo[]" value="' + (index + 1) + '" class="form-control" readonly>')
console.log(index);
});
i--;
});<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<button type="button" id="addRow">Add</button>
<div id="dynamic_field">
<div class="row">
<div class="col-lg-1">
<div class="form-group"><input type="text" name="requisitionNo[]" value='1' class="form-control" readonly></div>
</div>
<div class="col-lg-7">
<div class="form-group"><input type="text" name="requisitionDetails[]" class="form-control"></div>
</div>
<div class="col-lg-1">
<div class="form-group"><input type="text" name="itemPrice[]" class="form-control"></div>
</div>
<div class="col-lg-1">
<div class="form-group"><input type="text" name="itemQuantity[]" class="form-control"></div>
</div>
<div class="col-lg-1">
<div class="form-group"><input type="text" name="itemTotal[]" class="form-control"></div>
</div>
<div class="col-lg-1">
<div class="form-group"></div>
</div>
</div>
</div>
const $container = $('#dynamic_field');
const $row = $('.row',$container);
const renum = () => $container.find('[name^=requisitionNo]').each(function(i, ele) {$(ele).val(i+1)});
$('#addRow').click(function() {
const $newRow = $row.clone(true);
$newRow.find(':input').each(function() {
this.value = '';
});
$newRow.appendTo($container);
$newRow.find('.delRow').removeAttr('hidden');
renum();
});
$(document).on('click', '.delRow', function() {
$(this).closest(".row").remove();
renum();
});<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<button type="button" id="addRow">Add</button>
<div id="dynamic_field">
<div class="row">
<div class="col-lg-1">
<div class="form-group"><input type="text" name="requisitionNo[]" value='1' class="form-control" readonly></div>
</div>
<div class="col-lg-7">
<div class="form-group"><input type="text" name="requisitionDetails[]" class="form-control"></div>
</div>
<div class="col-lg-1">
<div class="form-group"><input type="text" name="itemPrice[]" class="form-control"></div>
</div>
<div class="col-lg-1">
<div class="form-group"><input type="text" name="itemQuantity[]" class="form-control"></div>
</div>
<div class="col-lg-1">
<div class="form-group"><input type="text" name="itemTotal[]" class="form-control"></div>
</div>
<div class="col-lg-1">
<div class="form-group"><button type="button" class="delRow" hidden><i class="fas fa-trash-alt"></i></button></div>
</div>
</div>
</div>