克隆表行后编辑输入名称和ID

Question

单击按钮后，将克隆表格的最后一行。每行都有不同的输入标签，名称和ID以“_”结尾+行数。

添加到表中的新行包含相同的字段，但每行中的名称和ID不会增加。

在检查了类似的问题后，我想到在我的jquery函数中添加以下代码（代码在代码片段中注释）。

$('#tablaFamilias tbody>tr:last').find("input").each(function (index, label){
    input.id = input.id.replace("_" + currentCount, "_" + newCount);
    input.name = input.name.replace("_" + currentCount, "_" + newCount);
});

但它没有改变属性，我在浏览器的控制台中收到以下错误：“未捕获的ReferenceError：输入未定义”

该功能有什么问题？ 谢谢你的帮助。

$("#cargarFamilias").click(function() {

  var currentCount = $("#tablaFamilias tr").length;
  var newCount = currentCount + 1;
  $('#tablaFamilias tbody>tr:last').clone(true).insertAfter('#tablaFamilias tbody>tr:last');
  /*
  $('#tablaFamilias tbody>tr:last').find("input").each(function(index, label) {
    input.id = input.id.replace("_" + currentCount, "_" + newCount);
    input.name = input.name.replace("_" + currentCount, "_" + newCount);
  });
  */

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<a id="cargarFamilias" class="btn btn-primary">
  <i class="fa "></i> Cargar conceptos de familia
</a>

<table id="tablaFamilias" class="table table-hover">
  <thead class="thead-inverse">
    <th>Partida</th>
    <th>Código</th>
    <th>Descripción</th>
    <th>Plazo de entrega</th>
    <th>Cantidad</th>
    <th>UM</th>
    <th>Lugar de entrega</th>
    <th>Dirección de entrega</th>
    <th></th>
  </thead>
  <tbody>
    <tr>
      <td>
        <input type="text" name="partida_1" id="partida_1" class="form-control" disabled/>
      </td>
      <td>
        <input type="text" name="codigo_1" id="codigo_1" class="form-control" />
      </td>
      <td>
        <input type="text" name="descripcion_1" id="descripcion_1" class="form-control" disabled/>
      </td>
      <td>
        <input type="text" name="plazoentrega_1" id="plazoentrega_1" class="form-control" />
      </td>
      <td>
        <input type="text" name="cantidad_1" id="cantidad_1" class="form-control" />
      </td>
      <td class="col-md-1">
        <input type="text" name="um_1" id="um_1" class="form-control" disabled/>
      </td>
      <td>
        <select name="lugarentrega_1" id="lugarentrega_1"></select>
      </td>
      <td class="col-md-2">
        <input type="text" name="direccionentrega_1" id="direccionentrega_1" class="form-control" />
      </td>
      <td id="td-not">
        <a title="Eliminar" class="btn btn-danger btn-xs"><span class="fa fa-trash"></span></a>
        <a title="Detalles" class="btn btn-info btn-xs"><span class="fa fa-info-circle"></span></a>
      </td>
    </tr>
  </tbody>
</table>

Answer 1

<强> 1。利用this ...

您正在使用each()对行中的输入进行迭代，这意味着您可以使用this来引用当前输入（而不是input不行。）

var newid = $(this).attr("id").replace("_" + currentCount, "_" + newCount);
var newname = $(this).attr("name").replace("_" + currentCount, "_" + newCount);
$(this).attr("id", newid).attr("name", newname);

<强> 2。您的currentCount包含标题...

对于1个数据行，currentCount实际为2.因为2或id不在name，所以不会进行替换。

您可以减去一个来补偿标题：

var currentCount = $("#tablaFamilias tr").length-1;

...或者不要在选择中包含标题，方法是更具体：

var currentCount = $("tableFamilias tbody tr").length;

第3。您没有增加select元素......

您只是递增 input 元素，但我必须假设您还想增加select元素：

$('#tablaFamilias tbody>tr:last').find("input, select").each( ... );

把它们放在一起......

$("#cargarFamilias").click(function() {

  var currentCount = $("#tablaFamilias tr").length-1;
  var newCount = currentCount + 1;
  $('#tablaFamilias tbody>tr:last').clone(true).insertAfter('#tablaFamilias tbody>tr:last');

  $('#tablaFamilias tbody>tr:last').find("input, select").each(function() {
    var newid = $(this).attr("id").replace("_" + currentCount, "_" + newCount);
    var newname = $(this).attr("name").replace("_" + currentCount, "_" + newCount);
    $(this).attr("id", newid).attr("name", newname);
  });


});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<a id="cargarFamilias" class="btn btn-primary">
  <i class="fa "></i> Cargar conceptos de familia
</a>

<table id="tablaFamilias" class="table table-hover">
  <thead class="thead-inverse">
    <th>Partida</th>
    <th>Código</th>
    <th>Descripción</th>
    <th>Plazo de entrega</th>
    <th>Cantidad</th>
    <th>UM</th>
    <th>Lugar de entrega</th>
    <th>Dirección de entrega</th>
    <th></th>
  </thead>
  <tbody>
    <tr>
      <td>
        <input type="text" name="partida_1" id="partida_1" class="form-control" disabled/>
      </td>
      <td>
        <input type="text" name="codigo_1" id="codigo_1" class="form-control" />
      </td>
      <td>
        <input type="text" name="descripcion_1" id="descripcion_1" class="form-control" disabled/>
      </td>
      <td>
        <input type="text" name="plazoentrega_1" id="plazoentrega_1" class="form-control" />
      </td>
      <td>
        <input type="text" name="cantidad_1" id="cantidad_1" class="form-control" />
      </td>
      <td class="col-md-1">
        <input type="text" name="um_1" id="um_1" class="form-control" disabled/>
      </td>
      <td>
        <select name="lugarentrega_1" id="lugarentrega_1"></select>
      </td>
      <td class="col-md-2">
        <input type="text" name="direccionentrega_1" id="direccionentrega_1" class="form-control" />
      </td>
      <td id="td-not">
        <a title="Eliminar" class="btn btn-danger btn-xs"><span class="fa fa-trash"></span></a>
        <a title="Detalles" class="btn btn-info btn-xs"><span class="fa fa-info-circle"></span></a>
      </td>
    </tr>
  </tbody>
</table>

Answer 2

您的点击事件应如下所示。两件事

1. 您需要按currentCount选择器而非#tablaFamilias tbody tr计算#tablaFamilias tr。
2. 使用attr()方法设置id和name。
＆＃13;
＆＃13;
$("#cargarFamilias").click(function() {
    var currentCount = $("#tablaFamilias tbody tr").length, 
        newCount = currentCount + 1;
        
    $('#tablaFamilias tbody > tr:last').clone(true).insertAfter('#tablaFamilias tbody > tr:last');
  
    $('#tablaFamilias tbody>tr:last').find("input").each(function() {
        var newId = this.id.replace("_" + currentCount, "_" + newCount);
        var newName = this.name.replace("_" + currentCount, "_" + newCount);

        $(this).attr('id', newId);
        $(this).attr('name', newName);
    });
});
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<a id="cargarFamilias" class="btn btn-primary">
  <i class="fa "></i> Cargar conceptos de familia
</a>

<table id="tablaFamilias" class="table table-hover">
  <thead class="thead-inverse">
    <th>Partida</th>
    <th>Código</th>
    <th>Descripción</th>
    <th>Plazo de entrega</th>
    <th>Cantidad</th>
    <th>UM</th>
    <th>Lugar de entrega</th>
    <th>Dirección de entrega</th>
    <th></th>
  </thead>
  <tbody>
    <tr>
      <td>
        <input type="text" name="partida_1" id="partida_1" class="form-control" disabled/>
      </td>
      <td>
        <input type="text" name="codigo_1" id="codigo_1" class="form-control" />
      </td>
      <td>
        <input type="text" name="descripcion_1" id="descripcion_1" class="form-control" disabled/>
      </td>
      <td>
        <input type="text" name="plazoentrega_1" id="plazoentrega_1" class="form-control" />
      </td>
      <td>
        <input type="text" name="cantidad_1" id="cantidad_1" class="form-control" />
      </td>
      <td class="col-md-1">
        <input type="text" name="um_1" id="um_1" class="form-control" disabled/>
      </td>
      <td>
        <select name="lugarentrega_1" id="lugarentrega_1"></select>
      </td>
      <td class="col-md-2">
        <input type="text" name="direccionentrega_1" id="direccionentrega_1" class="form-control" />
      </td>
      <td id="td-not">
        <a title="Eliminar" class="btn btn-danger btn-xs"><span class="fa fa-trash"></span></a>
        <a title="Detalles" class="btn btn-info btn-xs"><span class="fa fa-info-circle"></span></a>
      </td>
    </tr>
  </tbody>
</table>
＆＃13;
＆＃13;
＆＃13;