どのように動的に生成テキストボックスから小計テキストボックスの合計を計算する

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

ここではコードを書くつもりはありませんが、私はすでにこの種のものを開発しているので、あなたに提案してください。

あなたは乗算と小計に格納するマンデイ料金そして見積りマン日のblurイベントを作成する必要があります。小計フィールドは無効になっているため、この上にイベントを作成する必要はありません。すべての小計フィールドにクラス小計を追加します。

は今blurイベント内で、あなたは上のフィールドはJavaScriptコードによって生成された場合は、イベントで使用する必要があります。この

var total = 0; 

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

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

でループする必要があります。