我想在 jquery 克隆表行后清除字段

Question

我使用下面的 jquery 代码为我的简单发票应用程序克隆表行： 我想要的是当 tr 被克隆时，2 个输入字段应该是空的价格和数量，我将非常感谢您的帮助，在此先感谢：-

jQuery 代码：

function autoCalcSetup() {
    $('form[name=cart]').jAutoCalc('destroy');
    $('form[name=cart] tr[name=line_items]').jAutoCalc({keyEventsFire: true, decimalPlaces: 2, emptyAsZero: true});
    $('form[name=cart]').jAutoCalc({decimalPlaces: 2});
}
autoCalcSetup();
$('button[name=remove]').click(function(e) {
    e.preventDefault();
    var form = $(this).parents('form')
    $(this).parents('tr').remove();
    autoCalcSetup();
});


$('button[name=add]').click(function(e) {
    e.preventDefault();
    var $table = $(this).parents('table');
    var $top = $table.find('tr[name=line_items]').first();
    var $bottom = $table.find('tr[name=endin_colz]').first();
    var $new = $top.clone(true);
    $new.jAutoCalc('destroy');
    $new.insertBefore($bottom);
    autoCalcSetup();

});

<tr name="line_items">
  <td><button name="remove" class="btn btn-danger btn-sn">Remove</button></td>
  <td>
      <select class="form-control" name="productname[]" style="margin-bottom: 5px;">
               <option>Select...</option>
               <option>Barcode Machine</option>
<option>Snap frame A4</option>
<option>Snap frame A3</option>
<option>Snap frame A2</option>
<option>Snap frame A1</option>
<option>Snap frame A0</option>
<option>Gazebo Aluminum Foldable</option>
<option>Key Cabinet 24 keys</option>
<option>Vinyl Roll</option>
               </select>

       <textarea class="form-control" rows="5" name="particulars[]" ></textarea></td>

  <td><input type="text" id="qty" name="qty[]" class="form-control form-control-sn qty"></td>
  <td><input type="text" id="price" name="price[]" class="form-control form-control-sn price"></td>

  <td><input type="text" name="item_total[]" jAutoCalc="{#qty} * {#price}" class="form-control itemtotal" readonly></td>

  <td><input type="hidden" name="invidfk[]" value="<?php echo $inv_code; ?>"class="form-control form-control-sm"></td>
  </tr>

Answer 1

您可以使用$new.find("input").val(""); 将两个输入字段都设置为空

完整代码：

$('button[name=add]').click(function(e) {
    e.preventDefault();
    var $table = $(this).parents('table');
    var $top = $table.find('tr[name=line_items]').first();
    var $bottom = $table.find('tr[name=endin_colz]').first();
    var $new = $top.clone(true);
    $new.jAutoCalc('destroy');
    $new.find("input").val("");
    $new.insertBefore($bottom);
    autoCalcSetup();    
});

但请注意，您的代码存在一个普遍问题 - 如果您克隆具有 id 的元素并添加它们，您的 HTML 将不再有效，因为 id 必须是唯一的。最好改用类。