添加/删除所有文本框ID增量

Question

如何在所有文本框ID中设置添加/删除自动增量（ItemCode，ItemName添加到+1并删除到-1。）

    <div id="mainDiv">
    <div class="one">
    <div class="row">

    <div class="input-field col s1">
    <input type="text" id="sno" class="sno" name="Sr[]" value="1" >
    <label for="Sr" >Sr</label>
    </div>
    <div class="input-field col s2">
    <input id="ItemCode" type="text" name="ItemCode[]" onKeyUp="showHint(this.value)">
    <label for="ItemCode" >Item Code</label>
    </div>
    <div class="input-field col s2">
    <input id="ItemName" type="text" name="ItemName[]" value=" ">
    <label for="ItemName" >Item Name</label>
    </div>

    <div class="input-field col s1 add">
    <a href="#">Add</a>
    </div>

    <div class="input-field col s1 delete">
    <a href="#">Remove</a>
    </div>
    </div>
    </div>
    </div>

$(document).ready(function () {
$(".add").click(function () {
var length = $('.one').length;
var cloned = $(this).closest('.one').clone(true);        
cloned.appendTo("#mainDiv").find('.sno').val(length + 1);
cloned.find(':input:not(".sno")').val(" ");
var parent = $(this).closest('.one');

});
$('.delete').click(function () {
if($('.one').length==1){
alert("This is default row and can't deleted");
return false;
}
var parent = $(this).closest('.one');
$(this).parents(".one").remove();

// reset serial numbers again
$('.sno').each(function(i){
this.value=i+1;
})
});
});

https://jsfiddle.net/Nilesh_Patel/05e3wtcm/1/此示例

Answer 1

尝试将此代码添加到您的添加事件

cloned.find('input[name="ItemCode[]"]').attr('id','ItemCode'+(length + 1));
cloned.find('input[name="ItemName[]"]').attr('id','ItemName'+(length + 1));

Answer 2

这是你能做的。这也将重置删除时的ID。

由于标签的for属性应绑定到输入id，您可能也想要更改这些属性。

＆＃13;

＆＃13;

$(document).ready(function () {

  $(".add").click(function () {
    var length = $('.one').length;
    var cloned = $(this).closest('.one').clone(true);        
    cloned.appendTo("#mainDiv").find('.sno').val(length + 1);
    cloned.find(':input:not(".sno")').val(" ");
    cloned.find("label[for*='ItemCode']").attr('for', 'ItemCode' + (length+1));
    cloned.find("input[id*='ItemCode']").attr('id', 'ItemCode' + (length+1));
    cloned.find("label[for*='ItemName']").attr('for', 'ItemName' + (length+1));
    cloned.find("input[id*='ItemName']").attr('id', 'ItemName' + (length+1));
    var parent = $(this).closest('.one');
  });

  $('.delete').click(function () {
    if($('.one').length==1){
      alert("This is default row and can't deleted");
      return false;
    }
    var parent = $(this).closest('.one');
    $(this).parents(".one").remove();

    $('.one').each(function(index, item) {
      $(this).find('.sno').val(index+1);
      $(this).find("label[for*='ItemCode']").attr('for', 'ItemCode' + (index+1));
      $(this).find("input[id*='ItemCode']").attr('id', 'ItemCode' + (index+1));
      $(this).find("label[for*='ItemName']").attr('for', 'ItemName' + (index+1));
      $(this).find("input[id*='ItemName']").attr('id', 'ItemName' + (index+1));
    });
  });

});

＆＃13;

<div id="mainDiv">
  <div class="one">
    <div class="row">

      <div class="input-field col s1">
        <input type="text" id="sno" class="sno" name="Sr[]" value="1" />
        <label for="Sr" >Sr</label>
      </div>
      <div class="input-field col s2">
        <input id="ItemCode" type="text" name="ItemCode[]" onKeyUp="showHint(this.value)" />
        <label for="ItemCode" >Item Code</label>
      </div>
      <div class="input-field col s2">
        <input id="ItemName" type="text" name="ItemName[]" value=" " />
        <label for="ItemName" >Item Name</label>
      </div>

      <div class="input-field col s1 add">
        <a href="#">Add</a>
      </div>

      <div class="input-field col s1 delete">
        <a href="#">Remove</a>
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您可以使用以下功能重置序列号。检查jsfiddle https://jsfiddle.net/05e3wtcm/4/

function ResetSerialNumbers(){
  $('.sno').each(function(i){
  var val = i+1;
  this.value=val;
  $(this).closest('.row').find("input[id^='ItemCode']").first().attr("id",'ItemCode'+val);
    $(this).closest('.row').find("input[id^='ItemName']").first().attr("id",'ItemName'+val);
});
}