克隆表行后編輯輸入名稱和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. 您需要通過#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>