克隆表格行後編輯輸入名稱和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>