时间戳

首页 > 解决方案 > 重新计算指数

jquery - 重新计算指数

问题描述

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

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>

标签： jqueryindexing

解决方案

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

请注意，您正在重复 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>

推荐阅读