Question

我希望使用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，值和文本。

＆＃13;

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');

＆＃13;

<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>

＆＃13;

Answer 2

您可以使用.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>

Answer 3

您应该将最终渲染与模板分开。您的功能的另一个重要部分是分配一个唯一的数字来组成ID和名称。

我建议你实施像https://github.com/BorisMoore/jquery-tmpl

这样的解决方案

将模板放入带有Id的脚本节点中，然后复制它的内容并根据需要替换{}次出现。

如何修改表格行中的克隆字段表单值和id？

3 个答案: