Question

我正在尝试基于字段创建动态聚合。唯一的区别是它不是一个表而是一个div块。

我想要实现的目标

在按钮上单击添加字段，克隆模板中的内容（它就像一个表格行），这部分完全正常工作。

代码应该计算值，每行添加一些字段。我使用了keyup函数来保持它一直更新。

为什么不起作用？

好吧，我无法让它像这样工作。每个i_row或模板包含字段p_cnetto[] p_pvat[] p_ilosc[]（quantitiy）

因为我无法按行阅读 - 我尝试了很多东西，但显然做了一些不好的事情，它只计算了curr_net值并且它仍然不是应该的样子。

十进制值应该是可以接受的：例2222.00

它应该如何运作？

添加一行
求和行部分[实际上不需要显示行聚合]：
- curr_netto =将此行p_cnetto[]值乘以p_ilosc[]
- curr_brutto =获取此行(p_cnetto[] * p_pvat[]) / 100 * p_ilosc[]

最后它应该计算所有行的总计为total_netto，total_brutto - 可以在console.log中

感谢您的任何提示。

JsFiddle Example

＆＃13;

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

＆＃13;

Answer 1

下面的代码将遍历单个块并获取值。

$(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 - 你可以查看输出

根据动态添加的字段计算值

1 个答案: