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>

您可以看到我的输入名称是2D数组。我给用户提供了向表中添加另一行的选项，这将克隆上面的内容。目前，我的代码是这样的

$("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");

我在更新克隆项的name属性时遇到问题。对于第一个克隆行，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

看起来你正在假设＆＃39;我＆＃39;存在于.each函数中，但未将其作为参数提供：

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

....此外，当您进行替换时，名称将全部相同。好像你不应该取代＆＃34; [＆＃34; +（id-1）+＆＃34;]＆＃34;但简单地说：＆＃34; [0]＆＃34;。

（对不起，我在电话上 - 这里是完整的回复）主要问题是每个（...）循环将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");

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

1 个答案: