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

利用 this

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，无可代替被制成。

您可以减去一个以补偿头：

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. 您需要通过#tablaFamilias tbody tr选择，而不是#tablaFamilias tr计算currentCount。
2. 使用attr()方法设置id和name。

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

<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>