如何从动态生成文本框中计算小计文本框的总和

Question

我有单击添加按钮时可以动态生成的表单。我想得到所有小计文本框的总数（man_day_rates * estimated_man_days）。但我当前的代码只计算第一个输入行。如何自动计算所有小计输入。

$(document).ready(function(){
     var i=1;
     $('#add').click(function(){

             //$("#step-2").height(5000);
           if(i == 1){
                   //add_remove_button
                    $('#dynamic_field .add_remove_button').append('<button type="button" name="remove" id="'+i+'" class="btn btn-danger btn-xs btn_remove">X</button>');
           }

          i++;


          //Add field document History



          $('.dynamic_field .rowTotal').before('<tr id="row1'+i+'"><td></td>\
         </td>\
         <td style="">\
               <input id="man_day_rates'+i+'" class="form-control  col-md-7 col-xs-12" type="number" min="1" name="man_days_rate[]" >\
         </td>\
         <td style="">\
               <input id="estimated_man_days'+i+'" class="form-control  col-md-7 col-xs-12" type="number" min="1" name="estimated_man_days[]">\
         </td>\
          <td style=""> <input id="result'+i+'" class="form-control  col-md-7 col-xs-12 sum" disabled type="text" name="" value=""/></td>\
          <td style="height: 20px;line-height: 20px;white-space: nowrap;"><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn-xs btn_remove">X</button></td>\
          </tr> ');


        //function to calculate sub total for dynamic input/input after the first input
            var man_day_rates = $('#man_day_rates'+i);
            var estimated_man_days = $('#estimated_man_days'+i);
            var result = $('#result'+i);

            estimated_man_days.keyup(function(){
                var total=isNaN(parseInt(estimated_man_days.val()* man_day_rates.val())) ? 0 :(man_day_rates.val()* estimated_man_days.val());
                result.val(total);
                //alert(total);

            });

            man_day_rates.keyup(function(){
                var total=isNaN(parseInt(estimated_man_days.val()* man_day_rates.val())) ? 0 :(man_day_rates.val()* estimated_man_days.val());
                result.val(total);
                //alert(total);

            });
     });
     
     
 //function to calculate subtotal
function calculateSum() {
    var sum = 0;
    //iterate through each textboxes and add the values
    $(".sum").each(function() {
        //add only if the value is number
        if (!isNaN(this.value) && this.value.length != 0) {
            sum += parseFloat(this.value);

        }

    });

   $("#subtotal").val(sum.toFixed(2));
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

                                      <div class="table-responsive">
                                <table class="table  table-hover table-striped dynamic_field" id="dynamic_field" style="padding:0px;">
                                  <thead>
                                    <tr class="headings">
                                      <th class="column-title">#</th>
                                     ]
                                      <th class="column-title" style="min-width:110px;">Man Day Rates (RM)</th>
                                      <th class="column-title" style="min-width:110px;">Estimated Man Days </th>
                                      <th class="column-title"style="min-width:110px;">Subtotal (RM)</th>
                                      <th class="column-title"style=""></th>
                                      </th>

                                    </tr>
                                  </thead>

                                  <tbody>
                                          <tr id="row01" class="row01">

                                                   <td>1</td>
                                                  
                                                  <?php
                                                        $i = 1;

                                                  ?>
                                                  <td style="">
                                                        <input id="man_day_rates<?php echo $i; ?>" class="form-control  col-md-7 col-xs-12" type="number" min="1" name="man_days_rate[]" >
                                                  </td>


                                                  <td style="">
                                                        <input id="estimated_man_days<?php echo $i; ?>" class="form-control  col-md-7 col-xs-12" type="number" min="1" name="estimated_man_days[]" >
                                                  </td>


                                                   <td id=""> <input id="result<?php echo $i; ?>" type="text" class="form-control  col-md-7 col-xs-12 sum" disabled name="" value=""/></td>
                                                   <td class="add_remove_button" style="height: 20px;line-height: 20px;white-space: nowrap;"></td>


                                          </tr>


                                          <tr id="" class="rowTotal" style="background-color:white;">

                                                  <td style="border:none;visibility: hidden;"></td>
                                                  <td style="border:none;">

                                                  </td>
                                                  <td style="border:none;">

                                                  </td>


                                                  <td style="border:none;">

                                                  </td>


                                                  <td style="border:none;text-align:right;padding-right:0px;" >
                                                          <label class="control-label col-md-12 col-sm-12 col-xs-12" for="name">Subtotal
                                                          </label>
                                                  </td>


                                                   <td style="border:none;" > <input id="subtotal" type="text" class="form-control  col-md-7 col-xs-12" disabled name="subtotal" value=""/></td>
                                                   <td class="" style="border:none;height: 20px;line-height: 20px;white-space: nowrap;"></td>


                                          </tr>

                                          <tr id="" class="" style="background-color:white;">

                                                  <td style="border:none; visibility: hidden;"></td>
                                                  <td style="border:none;">

                                                  </td>
                                                  <td style="border:none;">

                                                  </td>


                                                  <td style="border:none;">

                                                  </td>


                                                  <td style="border:none;text-align:right;padding-right:0px;" >
                                                          <label class="control-label col-md-12 col-sm-12 col-xs-12" for="name">6% GST
                                                          </label>
                                                  </td>


                                                   <td style="border:none;" > <input id="result" type="text" class="form-control  col-md-7 col-xs-12" disabled name="" value=""/></td>
                                                   <td class="" style="border:none;height: 20px;line-height: 20px;white-space: nowrap;"></td>


                                          </tr>

                                          <tr id="" class="" style="background-color:white;">

                                                  <td style="border:none; visibility: hidden;"></td>
                                                  <td style="border:none;">

                                                  </td>
                                                  <td style="border:none;">

                                                  </td>


                                                  <td style="border:none;">

                                                  </td>


                                                  <td style="border:none;text-align:right;padding-right:0px;" >
                                                          <label class="control-label col-md-12 col-sm-12 col-xs-12" for="name">Total
                                                          </label>
                                                  </td>


                                                   <td style="border:none;" > <input id="result" type="text" class="form-control  col-md-7 col-xs-12 sum" disabled name="" value=""/></td>
                                                   <td class="" style="border:none;height: 20px;line-height: 20px;white-space: nowrap;"></td>


                                          </tr>



                                  </tbody>
                                </table>


                        </div>


                        <div><button id="add" type="button" class="btn btn-primary "><span class="fa fa-plus" style="margin-right:5px;"></span>Add Items</button></div>

我有单击添加按钮时可以动态生成的表单。我想得到所有小计文本框的总数（man_day_rates * estimated_man_days）。但我当前的代码只计算第一个输入行。如何自动计算所有小计输入。

Answer 1

这里我不打算编写代码，只是给你一个建议，因为我已经开发了这种东西。

您需要在人日费率和估算人日上创建模糊事件，以便相乘并存储到小计。因为小计字段是禁用的，所以您无需在此处创建任何事件。将类小计添加到所有小计字段。

现在在模糊事件中，您需要通过此

循环

var total = 0;

$(".subtotal").each(function()
{
    total += parseFloat($(this).val());
});

$("#grand-subtotal").val(total);

如果你的字段是由javascript代码生成的，你应该在事件中使用。