クローンフィールドのフォームの値とIDをテーブル行内で変更するにはどうすればよいですか？

Question

フォームに2つのフィールドがjQueryを使用してクローンしたいが、htmlテーブル構造を選択すると、フォームフィールドとラベルテキストのIDと値を変更する方法が混乱する。フォームフィールドの構造は次のとおりです

<table> 
<tbody> 
    <tr id="attribute-name"> 
     <td class="label"><label for="listing_qty">quantity</label></td> 
     <td class="value"> 
     <input id="listing_qty" name="field_name[]" value="quantity" class="required-entry disabled attribute-name input-text" readonly="1" type="text"> 
     </td> 
    </tr> 
    <tr id="attribute-custom"> 
     <td class="label"></td> 
     <td class="value"> 
     <input id="listing_custom_field" name="custom_field[]" value="" placeholder="Custom Attribute Field" type="text" class=" input-text"> 
     </td> 
    </tr> 
</tbody> 
</table> 

Answer 1

あなたは全体の要素のクローンを作成して、挿入する前にクローン化された要素にidを、数値、およびテキストを更新する必要があります。

function appendClonedFormInput(el, 
 
    newId, 
 
    newInputId, 
 
    newLabelText, 
 
    newName, 
 
    newValue) { 
 
    // Clone and update id 
 
    var $cloned = $(el) 
 
    .clone() 
 
    .attr('id', newId); 
 
    // Update label 
 
    $cloned.find('label') 
 
    .attr('for', newInputId) 
 
    .text(newLabelText); 
 
    // Update input 
 
    $cloned.find('input') 
 
    .attr('id', newInputId) 
 
    .attr('name', newName) 
 
    .val(newValue); 
 
    return $cloned.insertAfter(
 
    $('input').last().parents('tr')); 
 
} 
 

 

 
appendClonedFormInput('#attribute-name', 
 
    'new-attribute-id', 
 
    'new-inp-id', 
 
    'New Label', 
 
    'new_field', 
 
    'new value'); 
 

 

 
appendClonedFormInput('#attribute-custom', 
 
    'new-custom-id', 
 
    'new-custom-inp-id', 
 
    'New Custom', 
 
    'new_custom', 
 
    'new custom value');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tbody> 
 
    <tr id="attribute-name"> 
 
     <td class="label"> 
 
     <label for="listing_qty">quantity</label> 
 
     </td> 
 
     <td class="value"> 
 
     <input id="listing_qty" name="field_name[]" value="quantity" class="required-entry disabled attribute-name input-text" readonly="1" type="text"> 
 
     </td> 
 
    </tr> 
 
    <tr id="attribute-custom"> 
 
     <td class="label"></td> 
 
     <td class="value"> 
 
     <input id="listing_custom_field" name="custom_field[]" value="" placeholder="Custom Attribute Field" type="text" class=" input-text"> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 2

テンプレートから最終レンダリングを分離する必要があります。あなたの機能のもう一つの重要な部分は、IDと名前を構成するための一意の番号を割り当てることです。

私はIDを持つスクリプトノード内のテンプレートを入れhttps://github.com/BorisMoore/jquery-tmpl

ようなソリューションを実装するために、あなたをお勧めしますが、それはコンテンツだコピーし、必要に応じて} {出現を交換してください。

Answer 3

.clone() jquery関数を使用してHTML要素をクローンし、クローンされたHTML要素で、通常のjqueryセレクタで実行できるすべてのjquery操作を実行できます。

以下の作業スニペットを確認してください。スニペットで、ラベル名とIDを変更しました。

$(function(){ 
 
    var _counter = 1; 
 
    $("#cloned_html").on("click",function(){ 
 
    var $button = $('#attribute-name').clone().prop("id","attribute-name-"+_counter); 
 
    $button.find('#listing_qty').prop("id","listing_qty_"+_counter).val("quantity-"+_counter); 
 
    
 
    $button.find("label").html("Quantity-"+_counter); 
 
    var selector = '#attribute-name' 
 
    if(_counter>1){ 
 
     selector = '#attribute-name-'+(_counter-1) 
 
    } 
 
    $($button).insertAfter(selector); 
 
    _counter++; 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
<tbody> 
 
    <tr id="attribute-name"> 
 
     <td class="label"><label for="listing_qty">quantity</label></td> 
 
     <td class="value"> 
 
     <input id="listing_qty" name="field_name[]" value="quantity" class="required-entry disabled attribute-name input-text" readonly="1" type="text"> 
 
     </td> 
 
    </tr> 
 
    <tr id="attribute-custom"> 
 
     <td class="label"></td> 
 
     <td class="value"> 
 
     <input id="listing_custom_field" name="custom_field[]" value="" placeholder="Custom Attribute Field" type="text" class=" input-text"> 
 
     </td> 
 
    </tr> 
 
</tbody> 
 
</table> 
 
<button id="cloned_html">Clone</button>