Я хочу очистить поля после jquery клона строк таблицы - PullRequest
Новая
       20

Я хочу очистить поля после jquery клона строк таблицы

0 голосов
/ 12 апреля 2020

Я использую приведенный ниже 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>

1 Ответ

0 голосов
/ 12 апреля 2020

Вы можете установить оба поля ввода пустыми с помощью $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();    
});

Но учтите, что существует общая проблема с вашим кодом - если вы клонируете элементы с идентификатором и добавьте их, ваш HTML больше не действителен, так как идентификаторы должны быть уникальными. Лучше использовать классы вместо.

...