重新计算指数

Question

我有这样的添加/删除输入的功能。索引必须是连续的和增量的才能正常工作。但是，当某些输入被删除时，索引会继续存储输入的值，并且出现序列中断，这会导致数据库中的数据被错误地返回。如何在每次删除时重新计算索引？我只尝试了这种方法，但没有奏效：

var j = 0, i = 0;
$(".key").each(function(i) {
$(this).attr('name', 'properties['+i+'][key]');
i++;
});
$(".value").each(function(j) {
$(this).attr('name', 'properties['+j+'][key]');
j++;
});

var i = 0;
$("#addRow").click(function () {
var html = '';
html += '<div id="inputFormRow">';
html += '<div class="input-group mb-3">';
html += i+'<input type="text" name="properties['+i+'][key]" class="key form-control m-input ml-3" placeholder="Key" autocomplete="off">';
html += i+'<input type="text" name="properties['+i+'][value]" class="value form-control m-input ml-3" placeholder="Value" autocomplete="off">';
html += '<div class="input-group-append ml-3">';
html += '<button id="removeRow" type="button" class="btn btn-danger">Delete</button>';
html += '</div>';
html += '</div>';
i++;
$('#newRow').append(html);
});
// remove row
$(document).on('click', '#removeRow', function () {
$(this).closest('#inputFormRow').remove();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="newRow"></div>
<button id="addRow" type="button" class="btn btn-info">Add field</button>

如果这个代码可以改进，它可能会工作。存储了正确的索引，但由于某些原因，每个项目字段都设置为相同的数字，并且不会递增。

$(document).on('click', '#removeRow', function () {
i--;
$(this).closest('#inputFormRow').remove();
for (i = 0; i < $('.key').length; i++){
$('.key').attr('name', 'properties['+i+'][key]');
$('.value').attr('name', 'properties['+i+'][value]');
};
});

var i = 0;
$("#addRow").click(function () {
var html = '';
html += '<div id="inputFormRow">';
html += '<div class="input-group mb-3">';
html += '<input type="text" name="properties['+i+'][key]" class="key form-control m-input ml-3" placeholder="Key" autocomplete="off">';
html += '<input type="text" name="properties['+i+'][value]" class="value form-control m-input ml-3" placeholder="Value" autocomplete="off">';
html += '<div class="input-group-append ml-3">';
html += '<button id="removeRow" type="button" class="btn btn-danger">Delete</button>';
html += '</div>';
html += '</div>';
i++;
$('#newRow').append(html);
});
// remove row
$(document).on('click', '#removeRow', function () {
i--;
$(this).closest('#inputFormRow').remove();
for (i = 0; i < $('.key').length; i++){
$('.key').attr('name', 'properties['+i+'][key]');
$('.value').attr('name', 'properties['+i+'][value]');
};
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="newRow"></div>
<button id="addRow" type="button" class="btn btn-info">Add field</button>

Answer 1

可能最简单的方法就是对它们进行重新索引。你可以等到提交之前再提交，但对于每个动作来说，这并不是一项大任务。

请注意，您正在重复ID，因此它们已更改为类，因为ID在定义中是唯一的

以下循环遍历每一行，并获取该行的索引以传递给字段索引值

function reIndex(){
const reg=/[d+]/;
// `each` callback of row provides index needed
$('.inputFormRow').each(function(i){
$(this).find('.key,.value').attr('name', function(_, curr){
return curr.replace(reg, '[' + i +']')
});  
});

// for demo only set values with names to see effects
// remove this in production
$('.key,.value').val(function(){
return this.name
})
}

$("#addRow").click(function () {
let i = 100
var html = '';
html += '<div class="inputFormRow">';
html += '<div class="input-group mb-3">';
html += '<input type="text" name="properties['+i+'][key]" class="key form-control m-input ml-3" placeholder="Key" autocomplete="off">';
html += '<input type="text" name="properties['+i+'][value]" class="value form-control m-input ml-3" placeholder="Value" autocomplete="off">';
html += '<div class="input-group-append ml-3">';
html += '<button  type="button" class="removeRow btn btn-danger">Delete</button>';
html += '</div>';
html += '</div>';       
$('#newRow').append(html);
reIndex()
});
// remove row
$(document).on('click', '.removeRow', function () {

$(this).closest('.inputFormRow').remove();
reIndex()
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="newRow"></div>
<button id="addRow" type="button" class="btn btn-info">Add field</button>

Answer 2

我已经用文字字符串替换了html连接，这稍微干净一些，还用类替换了可能重复的id。

我还引入了一个数据属性来保存行的索引。

$("#addRow").click(function() {
let i = $("#newRow .inputFormRow").length;
var html = `
<div class="inputFormRow" data-index=${i}>
<div class="input-group mb-3">
${i}<input type="text" name="properties[${i}][key]" class="key form-control m-input ml-3" placeholder="Key" autocomplete="off">
<input type="text" name="properties[${i}][value]" class="value form-control m-input ml-3" placeholder="Value" autocomplete="off" >
<div class="input-group-append ml-3">
<button id="removeRow" type="button" class="btn btn-danger">Delete</button>
</div>
</div>`
$('#newRow').append(html);
});
// remove row
$(document).on('click', '#removeRow', function() {
//Get the target row
let thisRow = $(this).closest('.inputFormRow');
//Get the index from the data attribute for the current row
let thisIndex = parseInt($(thisRow).data("index"), 10);

//Loop through subsequent rows
$(thisRow).nextAll().each(function() {    
//Reset the index data attribute for this element
//Note that "this" now referes to the current elelment from the loop
$(this).data("index", thisIndex)
//Update the inputs indices for this element
$(this).find(".key").attr("name", `properties[${thisIndex}][key]`);
$(this).find(".value").attr("name", `properties[${thisIndex}][value]`);
//For Demo Only 
//$(this).find(".value").val(`idx: ${$(this).data("index")}`);
//Increment this index
thisIndex++;
});
//Remove the row
$(thisRow).remove();

//For Demo only
$(".value").each(function(){
$(this).val("data-index: " + $(this).closest(".inputFormRow").data("index"));
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="newRow"></div>
<button id="addRow" type="button" class="btn btn-info">Add field</button>