在 JQuery 中克隆时更改名称属性

Question

我有这样的表格

<tr id='actionRow'>
    <td>
        <input type="text" name='actionInput[0][action]' id="actionInput"  placeholder='Action' class="form-control"/>
    </td>
    <td>
        <input type="text" name='actionInput[0][deliveryDate]' id="dateInput" placeholder='Completion Date' class="form-control dateControl"/>
    </td>
</tr>

您可以看到我的输入名称是一个二维数组。我让用户可以选择向表中添加另一行，这将克隆上面的内容。目前，我的代码是这样的

$("table tr").eq(1).clone().find("input").each(function() {
    $(this).closest('tr').attr('id', 'actionRow'+i);
    $(this).attr({
        'id': function(_, id) {
            return id + i
        },
        'name': function(_, id) {
            return  $(this).attr('name').replace('['+(id-1)+']', '['+id+']')
        },
        'value': ''
    });

    if ($(this).hasClass('dateControl')) {
        $(this).val("");
    }

}).end().appendTo("table");

我在更新克隆项目的名称属性时遇到问题。对于第一个克隆的行，html 基本上应该如下所示

<tr id='actionRow'>
    <td>
        <input type="text" name='actionInput[1][action]' id="actionInput1"  placeholder='Action' class="form-control"/>
    </td>
    <td>
        <input type="text" name='actionInput[1][deliveryDate]' id="dateInput1" placeholder='Completion Date' class="form-control dateControl"/>
    </td>
</tr>

所以数组元素变为1。下一个克隆的行将有2等等。

使用我提供的 JQuery 代码，为什么替换不适合我？

谢谢

Answer 1

您似乎假设 .each 函数中存在“i”，但未将其作为参数提供：

.each(function(i, elem){
....code
})

....另外，当您进行替换时，名称将全部相同。看来您不应该替换“[”+（id-1）+“]”而只是：“[0]”。

（对不起，我正在打电话——这是完整的回复）主要问题是 each(...) 循环将 tr 的 idx 与输入的 idx 混淆了（此外，不能保证克隆行的 idx 将始终比新克隆行小一）。您需要一个嵌套循环，它依赖于表中的行数，而不是克隆行的索引。

这是一个 jsFiddle：https://jsfiddle.net/5bzLeraz/

$("table tr").eq(0).clone().each(function(tr_idx, tr_elem) {

    var 
      $tr = $(tr_elem),
      newRowIdx = $("table tr").length;

    $tr.attr('id', 'actionRow' + newRowIdx);

    $tr.find("input").each(function(i_idx, i_elem) {

      var $input = $(i_elem);

      $input.attr({
          'id': function(_, id) {
              return id + newRowIdx;
          },
          'name': function(_, id) {
              return id.replace('[0]', '['+ newRowIdx +']');
          },
          'value': ''
      });

      if ($input.hasClass('dateControl')) {
          $input.val("");
      }

    });

  }).appendTo("table");