Question

我正在尝试创建一个用户必须添加产品的表单。
我已经制作了这样的表单 JSFIDDLE - ＆gt; http://jsfiddle.net/FC7df/2/

当我添加一个产品时，名称索引必须递增，例如：对于第二个pname名称必须是name="pname[1]"。对于其他人来说同样明智。
我知道如何添加行，但问题是如果有人添加4个产品然后删除第2个产品，其余产品的名称索引序列就像这样 - ＆gt;

第一件产品 - name = "pname[0]"
第二件商品 - name = "pname[2]" //这应该更改为pname [1]
第3个产品 - name = "pname[3]" //这应该更改为pname [2]

如何在jquery中执行此操作，以便无论删除哪个元素，索引序列仍然有条理？

Answer 1

理想情况下，您不应该关心html元素的重新排序。请查看fiddle

$(document.body).on("click",".remove",function(){
  i--;
  $(this).closest("tr").remove();
  var remaningTR = $("table tr");
    console.log("i",i)
    console.log("remaningTR",remaningTR)
  for(var j=0;j<=i;j++){
      console.log("came in")
    var inputElem = $(remaningTR[j+1]).find("input[type=text]");
    console.log("inputElem",inputElem)
    $(inputElem[0]).attr("name","pname["+ j +"]");
    $(inputElem[1]).attr("name","mno["+ j +"]");
    $(inputElem[2]).attr("name","price["+ j +"]");
  }  
})

Answer 2

在添加或删除项目时，只需迭代元素并更新索引即可。像这样：

$('table').find('input[name^="pname"]').each(function(i){
    $(this).prop({ name: 'pname[' + i + ']' }); // etc...
});

Answer 3

当你想删除一个元素时使用array.splice（index，1）;这样，索引序列将保持有序 http://plnkr.co/edit/N950rfO2o5xaxUhU6rvQ?p=preview

Answer 4

当触发remove事件时，只需通过行（$ .each）并用迭代器替换每个输入元素名称索引。

如何在jQuery中创建ADD和REMOVE行

4 个答案: