Question

我有一个表格，每一行都是一个多维数组，行名称如 name =＆＃34; product [key] [order]＆＃34; 密钥的默认值按升序排列（0,1,2,3 ...）每当我每行单击删除按钮时，我希望表中的所有键值都重置为默认值，但我不知道该怎么做？

像表一样，行的名称如下：name =＆＃34; product [1] [name]＆＃34;，name =＆＃34; product [2] [name]＆＃34;，name = ＆＃34;产物[3] [名称]＆＃34;

如果删除行获取名称=＆＃34;产品[2] [名称]＆＃34;，我希望第三行将密钥从3更改为2，等等...

更新问题：

尝试将密钥设置为隐藏输入时出现问题。我不知道如何设置隐藏输入的键值，如

<input type=hidden name="products['+i+'][id]">

任何人都帮我PLZ？

表格如 https://jsfiddle.net/soulcrys/eydx7dn0

<table id="list">
  <tr>
<input type="hidden" maxlength="2" id="id" name="product[1][id]" value="" />
    <td>
      <input type="text" maxlength="2" id="display_order" name="product[1][order]" value="1" />
    </td>
    <td>
      <input type="text" maxlength="20" id="name" name="product[1][name]" value="">
    </td>
    <td>      
    </td>
  </tr>
</table>
<input type="button" value="Add" id="add_more" />

   $('#add_more').click(function() {
  var currentLength = $('#list tr').length + 1;
  var htmldata = '<tr>';
  htmldata += '<td>' + '<input type="text" maxlength="2" id="order" name="product[' + currentLength + '][order]" value="' + currentLength + ' " />' + '</td>';
  htmldata += '<td>' + '<input type="text" maxlength="2" id="name" name="product[' + currentLength + '][name]" value="" />' + '</td>';
  htmldata += '<td>' + '<input type="button" class="deleteBtn" value="Delete">' + '</td>';
  htmldata += '</tr>';
  $("#list").append(htmldata);
})

$(document).on('click','.deleteBtn',function() {
  $(this).closest('tr').remove();
  var i=1;
  var j = 1;
  $('tr td input[type="text"]').each(function(index){
    var id = $(this).attr('id');
    console.log($(this).attr('name'));
    if(id == 'order')
    {
      $(this).attr('name','products['+i+'][order]')
      $(this).val(i);
    }else if(id == 'name')
    {
      $(this).attr('name','products['+i+'][name]')
    }

    if(j == 2)
    {
      j = 1;
      i++;
    }else{
        j++;
    }

  })
})

Answer 1

@sabbirspi的答案解决了一个潜在问题，但回答了实际问题（并且无耻地借用了他的第一行代码）

$(document).on('click', '#deleteBtn', function() {
    $(this).closest('tr').remove();

    $('#list tr').each(function(index, tr) {
        $(this).find('input[type=text]').each(function(unused, input) {
            this.name = this.name.replace(/^(product\[)\d+(\].*)$/, function(match, p1, p2) {
                return p1 + (index + 1) + p2;
            });
            if(this.name.indexOf('[order]') > 0) {
                this.value = index + 1;
            }
        });
    });
});

Answer 2

尝试使用此代码重置您的ID

工作小提琴：https://jsfiddle.net/eydx7dn0/7/

$('#add_more').click(function() {
  var currentLength = $('#list tr').length + 1;
  var htmldata = '<tr>';
  htmldata += '<td>' + '<input type="text" maxlength="2" id="order" name="product[' + currentLength + '][order]" value="' + currentLength + ' " />' + '</td>';
  htmldata += '<td>' + '<input type="text" maxlength="2" id="name" name="product[' + currentLength + '][name]" value="" />' + '</td>';
  htmldata += '<td>' + '<input type="button" class="deleteBtn" value="Delete">' + '</td>';
  htmldata += '</tr>';
  $("#list").append(htmldata);
})

$(document).on('click','.deleteBtn',function() {
  $(this).closest('tr').remove();
  var i=1;
  var j = 1;
  $('tr td input[type="text"]').each(function(index){
    var id = $(this).attr('id');
    console.log($(this).attr('name'));
    if(id == 'order' || id == 'display_order')
    {
      $(this).attr('name','products['+i+'][order]')
      $(this).val(i);
    }else if(id == 'name')
    {
      $(this).attr('name','products['+i+'][name]')
    }

    if(j == 2)
    {
      j = 1;
      i++;
    }else{
        j++;
    }

  })
})

Answer 3

你需要在现场工作。更改此代码并可能解决

$(document).on('click', '#deleteBtn', function() {


$(this).closest('tr').remove();

})

如何删除html表中的一行并将每行重置为默认值[0,1,2 ...]

如果删除行获取名称=＆＃34;产品[2] [名称]＆＃34;，我希望第三行将密钥从3更改为2，等等...

3 个答案: