基於動態添加的字段計算值

Question

我試圖根據字段創建動態聚合。唯一的區別是它不是一個表格而是一個div區塊。

我試圖完成

在點擊按鈕添加字段，從模板內容克隆（它就像一個錶行），這部分是完全正常工作。

代碼應該計算值，爲每行添加一些字段。我使用了密碼功能來保持它隨時更新。

爲什麼它不起作用？

嗯，我無法得到它的工作像i_row或模板等。每包含字段p_cnetto[] p_pvat[] p_ilosc[]（quantitiy）

因爲我看不懂行的智慧 - 我試過很多東西，但顯然做了壞事它只計算curr_net的值，它仍然不是它應該的方式。

十進制值應該是可以接受的：例如2222.00

它應該如何運作？

1. 添加一行

2. 總結排部[不是真的需要顯示行聚合]：

   • curr_netto =由p_ilosc[]

   • curr_brutto多次獲得此行p_cnetto[]值=得到這一行(p_cnetto[] * p_pvat[])/100 * p_ilosc[]

在到底應該計算總計中的所有行的如total_netto，total_brutto - 可能是在執行console.log

感謝您的任何提示。

JsFiddle Example

 \t <!-- statistic block ---> 
 
<div id="curr_netto"></div> 
 
<div id="curr_brutto"></div> 
 

 
<button class="btn btn-primary btn-add-panel mt-5" type="button"> <i class="glyphicon glyphicon-plus"></i> Add field</button> 
 
<div class="row"> 
 
    <div class="col-sm-12" id="extra_group"> 
 

 
    <!-- s --> 
 

 
    <div class="widget widget2 card template mb-2 bg-light-blue-50" style="display: none;"> 
 
     <div class="col-lg-5"> 
 
     <div class="row i_row"> 
 
      <div class="form-group col-md-2"> 
 
      <div class="form-group pmd-textfield pmd-textfield-floating-label"> 
 
       <label>Name</label> 
 
       <input type="text" name="p_nazwa[]" class="form-control"></input> 
 
      </div> 
 
      </div> 
 
      <div class="form-group col-md-2"> 
 
      <div class="form-group pmd-textfield pmd-textfield-floating-label"> 
 
       <label>Qty</label> 
 
       <input type="text" name="p_ilosc[]" class="form-control p_ilosc"></input> 
 
      </div> 
 
      </div> 
 
      <div class="form-group col-md-2"> 
 
      <div class="form-group pmd-textfield pmd-textfield-floating-label"> 
 
       <label>Unit</label> 
 
       <select class="form-control" name="p_unit[]"> 
 
       <option value="Kg">Kilogram</option> 
 
       </select> 
 
      </div> 
 
      </div> 
 

 

 
      <div class="form-group col-md-2"> 
 
      <div class="form-group pmd-textfield pmd-textfield-floating-label"> 
 
       <label>Net</label> 
 
       <input type="text" name="p_cnetto[]" class="form-control p_cnetto"></input> 
 
      </div> 
 
      </div> 
 
      <div class="form-group col-md-2"> 
 
      <div class="form-group pmd-textfield pmd-textfield-floating-label"> 
 
       <label>VAT</label> 
 
       <input type="text" name="p_pvat[]" class="form-control p_pvat"></input> 
 
      </div> 
 
      </div> 
 
      <div class="form-group col-md-2"> 
 
      <div class="subtot"></div> 
 
      </div> 
 
      <div class="form-group col-md-2"> 
 
      <button class="btn btn-danger btn-add-panel rh mt-5 ml-3"> <i class="glyphicon glyphicon-minus"></i> Del</button> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 

 

 

 
    <!-- s --> 
 
    </div> 
 
</div>

---

Answer 1

，這對我的作品

$(document).bind("keyup change", function (e) { 
      var pbrutto = 0; 
      var wartosc_vat = 0; 
      var cnetto = 0; 

      jQuery('#extra_group .template').each(function() { 

       var qty_field_current = (Number(jQuery(this).find('.p_ilosc').val())); 
       var vatfield_current = (Number(jQuery(this).find('.p_pvat').val())); 
       var nettofield_current = (Number(jQuery(this).find('.p_cnetto').val().replace("Zł ", "").replace(",", ""))); 
       cnetto = cnetto + (nettofield_current * qty_field_current); 
       wartosc_vat = wartosc_vat + (nettofield_current * vatfield_current)/100; 
       wartosc_vat = wartosc_vat * qty_field_current; 

      }); 

      pbrutto = cnetto + wartosc_vat; 
      $("#curr_brutto").html("Brutto : " + pbrutto + " zł"); 
      $("#curr_netto").html("Netto : " + cnetto + " zł"); 
      $("#curr_vat").html("Vat : " + wartosc_vat + " zł"); 

     }); 

Answer 2

以下代碼將通過個別塊循環，並得到的值。

$(document).keyup(function() { 

    // desired calculation : for curr_netto is [name='p_cnetto[]']" * [name="p_pvat[]"] 
    // curr_brutto = ([name='p_cnetto[]']" * [name="p_pvat[]"])/100 * name="p_ilosc[]" 
    var cnetto = 0; 
    var pnetto = 0; 
    jQuery('#extra_group .template').each(function(){ 
     var resetVar = (Number(jQuery(this).find('.p_cnetto').val()) * Number(jQuery(this).find('.p_pvat').val())); 
     cnetto = cnetto + resetVar; 

     pnetto = pnetto + ((resetVar/100) * Number(jQuery(this).find('.p_cnetto').val())); 
    }); 

    $("#curr_netto").html("Netto : " + cnetto + " -- " + pnetto) 
    console.log(cnetto); 
}); 

@Kavvson Empcraft也更新了你的jsfiddle - 你可以檢查基於答案輸出