表の行をクローンした後の入力名と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の...

あなたはを参照するためにthisを使用することができることを意味し、each()を使用して行の入力を繰り返し処理しています現在の入力（inputの代わりに動作しません）。 currentCountは2がid又はnameではないので、何の交換実際2.しない

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つのデータ列と

、作成されます。

あなたは1ヘッダを補うために引くことができ、次のいずれか

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

...かどうか、もう少し具体的な取得することによって、あなたの選択のヘッダを含める：

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

---

3. selectの要素が増えていません...

また select要素をインクリメントしたい10

はあなただけinput要素をインクリメントしているが、私はあなたを想定する必要があります。

$('#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. idとnameを設定する方法は、attr()を使用してください。

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