Question

我有一些产品数据行。我可以通过jQuery动态添加更多行，我计算了最后每一行的总数。现在我想计算所有行的总计。我累了，但它总是显示最后一行总计。请看图片。

这是我的jquery部分。

 //calculation here

$('#dsp').on('input','.ctn',function(){
     var cal=$(this).val();
     var gparent=$(this).closest('.row');
     var unitp=gparent.find('.u_price').val();
     var unitpctn=gparent.find('.unit_pctn').val();
     var pcs=gparent.find('.pcs').val();
    //alert(pcs);
    var total=(((parseInt(unitpctn)*parseInt(cal)) + parseInt(pcs))*parseInt(unitp));

       gparent.find('.t_amt').val(total);

       //grand total
       var gtotal=0;
       var gtotal=parseInt(gtotal)+parseInt(total)
       //alert(gtotal);
       $('#tot').html(gtotal);


});

 $('#dsp').on('input','.pcs',function(){
     var pcs=$(this).val();
     var gparent=$(this).closest('.row');
     var unitp=gparent.find('.u_price').val();
     var unitpctn=gparent.find('.unit_pctn').val();
     var ctn=gparent.find('.ctn').val();
    //alert(pcs);
    var total=(((parseInt(unitpctn)*parseInt(ctn)) + parseInt(pcs))*parseInt(unitp));

       gparent.find('.t_amt').val(total);

       //grand total
       var gtotal=0;
       var gtotal=parseInt(gtotal)+parseInt(total)
       //alert(gtotal);
       $('#tot').html(gtotal);


});

这是我的观点部分。

   <div id="dsp">
  <div class="row">
    <div class="col-md-2">
      <select name="p_name[]" class="form-control p_name">
      <option value="">-Select Product-</option>
      @foreach($products as $product)
      <option value="{{$product->product_id}}">{{$product->name}}</option>
      @endforeach
    </select>
    </div>
    <div class="col-md-2">
      <input type="text" name="p_code[]" class="form-control p_code">
    </div>
    <div class="col-md-2">
      <input type="text" name="unit_pctn[]" class="form-control unit_pctn" value="0">
    </div>
    <div class="col-md-2">
      <input type="text" name="u_price[]" class="form-control u_price" value="0">
    </div>
    <div class="col-md-1">
      <input type="text" name="ctn[]" class="form-control ctn" value="0">
    </div>
    <div class="col-md-1">
      <input type="text" name="pcs[]" class="form-control pcs" value="0">
    </div>
    <div class="col-md-2">
      <input type="text" name="t_amt[]" class="form-control t_amt" value="0">
    </div>

  </div>&nbsp;
</div>
            <div class="row" id="nep"></div>
             <div class="row">
                       <div class="col-md-10"></div>
                     <div class="col-md-2">GrandTotal:<h5 id="tot">0</h5></div>
                   </div>

Answer 1

这是一个帮助您计算总计的小功能：

change

您需要在个人总数的/etc/apt/sources.list.d/php.list上调用以上函数或更新个别总计。只需调用该功能即可返回总计。

Answer 2

此代码是您的问题的代码工作。

gparent.find(".t_amt").each(function() {
               var gtotal=parseInt(gtotal)+parseInt(total)
    }

完整代码：

  //calculation here

    $('#dsp').on('input','.ctn',function(){
         var cal=$(this).val();
         var gparent=$(this).closest('.row');
         var unitp=gparent.find('.u_price').val();
         var unitpctn=gparent.find('.unit_pctn').val();
         var pcs=gparent.find('.pcs').val();
        //alert(pcs);
        var total=(((parseInt(unitpctn)*parseInt(cal)) + parseInt(pcs))*parseInt(unitp));

           gparent.find('.t_amt').val(total);

           //grand total
           var gtotal=0;
           var gtotal=parseInt(gtotal)+parseInt(total)
           //alert(gtotal);
           $('#tot').html(gtotal);


    });

     $('#dsp').on('input','.pcs',function(){
         var pcs=$(this).val();
         var gparent=$(this).closest('.row');
         var unitp=gparent.find('.u_price').val();
         var unitpctn=gparent.find('.unit_pctn').val();
         var ctn=gparent.find('.ctn').val();
        //alert(pcs);
        var total=(((parseInt(unitpctn)*parseInt(ctn)) + parseInt(pcs))*parseInt(unitp));

           gparent.find('.t_amt').val(total);

           //grand total
           var gtotal=0;
 gparent.find(".t_amt").each(function() {
           var gtotal=parseInt(gtotal)+parseInt(total);
}
           //alert(gtotal);
           $('#tot').html(gtotal);


    });

Answer 3

数据绑定和计算都在这里完成，

 $(document).ready(function(){
$('#dsp').on('change','.p_name',function(){
  var pid=$(this).val();
  var parent= $(this).closest('.row');
  //alert(pid);
  $.ajax({
    url:"{{route('getinfo')}}",
    method:'post',
    data:{id:pid,'_token':"{{csrf_token()}}"},
    success:function(response) {   

      //alert(response.code);
      parent.find('.p_code').val(response.code);
      parent.find('.unit_pctn').val(response.pcs_per_ctn);
    }
  });

    $.ajax({
    url:"{{route('getprice')}}",
    method:'post',
    data:{id:pid,'_token':"{{csrf_token()}}"},
    success:function(response) {
      //alert(response.code);

      parent.find('.u_price').val(response.client_price);

    }
  });



});

//calculation here

$('#dsp').on('input','.ctn',function(){
     var cal=$(this).val();
     var gparent=$(this).closest('.row');
     var unitp=gparent.find('.u_price').val();
     var unitpctn=gparent.find('.unit_pctn').val();
     var pcs=gparent.find('.pcs').val();
    //alert(pcs);
    var total=(((parseInt(unitpctn)*parseInt(cal)) + parseInt(pcs))*parseInt(unitp));

       gparent.find('.t_amt').val(total);

       //grand total
       var gtotal=0;
       var gtotal=parseInt(gtotal)+parseInt(total)
       //alert(gtotal);
       $('#tot').val(gtotal);


});

 $('#dsp').on('input','.pcs',function(){
     var pcs=$(this).val();
     var gparent=$(this).closest('.row');
     var unitp=gparent.find('.u_price').val();
     var unitpctn=gparent.find('.unit_pctn').val();
     var ctn=gparent.find('.ctn').val();
    //alert(pcs);
    var total=(((parseInt(unitpctn)*parseInt(ctn)) + parseInt(pcs))*parseInt(unitp));

       gparent.find('.t_amt').val(total);

       //grand total

       var gtotal=0;
       $('.t_amt').each(function(){ gtotal += parseFloat($(this).val()) || 0; $('#tot').val(gtotal); }); 
     });

}）;

如何计算jquery

3 个答案: