Javascript 行删除时计数器重新索引

我有一个动态表单，可以在页面上插入新行。每行将生成新的

id

（基于计数器值的项目1、项目2、项目3）。当我删除一行时，我将计数器设置为减少

假设我有4个动态生成的行，我删除了第3行。现在，当我添加新行时，我在project4中得到了2x

id

。是否有一种简单的方法来重新索引行，因此如果删除第3行，那么第4行将变为第3行等，而不是使用我当前的计数器方法？我是否需要将每一行存储为一个数组

我现在的做法可能会让事情变得过于复杂

jQuery（'a.pluslink'）。单击（函数（事件）{
var计数器=1；
event.preventDefault（）；
var newRow=jQuery(
'' +
'' + '');
$（“#项目”+计数器，新罗）；
jQuery（'table.tablesubmit tr:last'）。在（newRow）之前；
计数器++；
});
$（“table.tablesubmit”）。在（'click'，'.minuslink'，函数（e）上{
event.preventDefault（）；
$（this.parent（）.parent（）.remove（）；
计数器--；
});

项目名称
周一
星期二
结婚
星期四
星期五
坐
太阳
一种方法是将表建立在数组的基础上（您可以更轻松地进行更新），并在每次从数组中删除值时完全重写表（注意使用索引更改输入ID中的数字）：


表_数组=[
{
单元格_1_值：“单元格1第1行”，
},
{
单元格_1_值：“单元格1第2行”，
},
];
函数从\u数组（此\u数组）写入\u表\u{
表_html=“”；
这是数组.forEach（函数（行，索引）{
表_html+=“”+行。单元格_1_值+“”；
});
表_html+=''；
document.getElementById（“table_div”）.innerHTML=table_html；
//保持这个功能
$（“.delete_按钮”）。在（“单击”，函数（）{
row_to_delete=this.id.replace（“delete_uu”，”）；
表1阵列拼接（第1行至第1行删除）；
从_数组（table_数组）写入_table_；
});
}
从_数组（table_数组）写入_table_
一种方法是将表建立在数组的基础上（您可以更轻松地进行更新），并在每次从数组中删除值时完全重写表（注意使用索引更改输入ID中的数字）：


表_数组=[
{
单元格_1_值：“单元格1第1行”，
},
{
单元格_1_值：“单元格1第2行”，
},
];
函数从\u数组（此\u数组）写入\u表\u{
表_html=“”；
这是数组.forEach（函数（行，索引）{
表_html+=“”+行。单元格_1_值+“”；
});
表_html+=''；
document.getElementById（“table_div”）.innerHTML=table_html；
//保持这个功能
$（“.delete_按钮”）。在（“单击”，函数（）{
row_to_delete=this.id.replace（“delete_uu”，”）；
表1阵列拼接（第1行至第1行删除）；
从_数组（table_数组）写入_table_；
});
}
从_数组（table_数组）写入_table_
您可以使用
$（）遍历每一行。each（）
，然后重新编号。
但真正的问题是：你为什么要改变你的计数器？我实际上会处理处理数据的服务器端代码，这样即使有漏洞也能正常工作。
例如，在php中：

foreach ($_GET as $key => $value)
{
  if(strpos($key,"project")==0)
  {
    // process whole row
    // You can even use a sub-string to get the counter and call the other inputs you have on the same row this way
  }
}

如果您必须将其放在客户端，我会这样做：

jQuery('a.pluslink').click(function(event) {
  event.preventDefault();
  var counter=0;
  jQuery('table.tablesubmit tr').each ( function (i) {
    var input=$(this).find('input[name^="project"]');
    if(input.length>0) counter++;
    input.attr('id','project'+counter);
  });
  counter++;
  var newRow = jQuery(
    //no changes there
  );
  jQuery('table.tablesubmit tr:last').before(newRow);
});

您可以使用
$（）.each（）
在每一行上运行，并重新编号。
但真正的问题是：你为什么要改变你的计数器？我实际上会处理处理数据的服务器端代码，这样即使有漏洞也能正常工作。
例如，在php中：

foreach ($_GET as $key => $value)
{
  if(strpos($key,"project")==0)
  {
    // process whole row
    // You can even use a sub-string to get the counter and call the other inputs you have on the same row this way
  }
}

如果您必须将其放在客户端，我会这样做：

jQuery('a.pluslink').click(function(event) {
  event.preventDefault();
  var counter=0;
  jQuery('table.tablesubmit tr').each ( function (i) {
    var input=$(this).find('input[name^="project"]');
    if(input.length>0) counter++;
    input.attr('id','project'+counter);
  });
  counter++;
  var newRow = jQuery(
    //no changes there
  );
  jQuery('table.tablesubmit tr:last').before(newRow);
});

谢谢，我们正在寻找在后端实现的方法。我们需要动态添加的行具有唯一的ID，所以这是我第一次尝试的方式。在某些情况下，前端需要唯一的ID，是的。在这种情况下，请尝试使用
jQuery（）.each（）
在每一行上运行。每当您添加新行并重置每一行的计数器时，请尝试运行每一行。感谢您的帮助，尽管我不确定从何处开始。已编辑的答案以添加客户端解决方案此处已无创意。。。也许可以尝试设置一个JSFIDLE，这样我就可以查看整个代码。。。我要到明天晚些时候才能看到它，但也许其他人会得到解决方案。谢谢，我们正在寻找在后端实现它的方法。我们需要动态添加的行具有唯一的ID，所以这是我第一次尝试的方式。在某些情况下，前端需要唯一的ID，是的。在这种情况下，请尝试使用
jQuery（）.each（）
在每一行上运行。每当您添加新行并重置每一行的计数器时，请尝试运行每一行。感谢您的帮助，尽管我不确定从何处开始。已编辑的答案以添加客户端解决方案此处已无创意。。。也许可以尝试设置一个JSFIDLE，这样我就可以查看整个代码。。。我要到明天晚些时候才能看，但也许其他人能找到解决办法。