javascript - 克隆表行后编辑输入名称和 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);
});

但它不会更改属性，并且我在浏览器控制台中收到以下错误:“Uncaught 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。利用这个...

您正在使用 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 中>，不进行替换。

您可以减一来补偿 header :

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>