如何修改表格行內的克隆字段表單值和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和名稱。

我建議你實現像https://github.com/BorisMoore/jquery-tmpl

的解決方案寫一個腳本程序節點內模板一個ID，然後複製它的內容和替換{}出現，因爲你需要。

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>