動的に作成された入力フィールドから同じIDを合計する方法

Question

動的に作成された入力フィールドから同じIDの合計が機能していません。ここで私は動的に作成されたid = "tamnt"の合計が必要です。誰かが私が間違っている場所を教えてもらえますか？あなたはそれを説明できますか？ここで

function totalIt() { 
 
    var total = 0; 
 
    var tableRow = $(this).closest("tr"); 
 
    var sim = Number(tableRow.find("#tamnt")); 
 
    tableRow.find("#tamnt").each(function() { 
 
    var val = this.value; 
 
    total += val == "" || isNaN(val) ? 0 : parseInt(val); 
 
    }); 
 
    // $("#total").val(total); 
 
    console.log(total); 
 
} 
 

 
$('#add_bank_info').click(function() { 
 
    var ele = $('.bank_table').find('tbody').find('tr:last'); 
 
    var ele_clone = ele.clone(); 
 

 
    ele_clone.find('input, select').attr("disabled", false).val(''); 
 
    ele_clone.find('td div.dummy').removeClass('has-error has-success'); 
 
    ele_clone.find('td div.input-icon i').removeClass('fa-check fa-warning'); 
 
    ele_clone.find('td:last').show(); 
 
    totalIt(); 
 
    ele_clone.find('.remove_bank_row').click(function() { 
 
    $(this).closest('tr').remove(); 
 
    totalIt(); 
 
    }); 
 
    ele.after(ele_clone); 
 
    ele_clone.show(); 
 
}); 
 

 
$("table").on("keyup", "input", function() { //use event delegation 
 
    var tableRow = $(this).closest("tr"); //from input find row 
 
    var one = Number(tableRow.find(".quantity2").val()); //get first textbox 
 
    var two = Number(tableRow.find("#rate").val()); //get second textbox 
 
    var total = one * two; //calculate total 
 
    tableRow.find("#tamnt").val(total); //set value 
 
    totalIt(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="col-sm-2"> 
 
    <strong><a href="javascript:void(0);" id="add_bank_info" class="addCF "><i class="fa fa-plus"></i>&nbsp;Add New</a></strong> 
 
</div> 
 
<div class="table-scrollable form-body"> 
 
    <table class="table table-bordered table-striped table-hover bank_table"> 
 
    <thead> 
 
     <tr> 
 
     <th style="width:10%">Names</th> 
 
     <th style="width:10%">Quantity</th> 
 
     <th style="width:10%">Unit Rate</th> 
 
     <th style="width:10%">Total Amount</th> 
 
     <th style="width:5%">Delete</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 

 
     <tr> 
 
     <td> 
 
      <div class="dummy"> 
 
      <div class="input-icon right"> 
 

 
       <select name="pr_article_no[]" id="sp_name" class="form-control"> 
 
       <option value="">--Select Options--</option> 
 
       <option value="0"></option> 
 
       <option value="1">Item A</option> 
 
       <option value="2">Item B</option> 
 
       <option value="3">Item C</option> 
 

 
       </select> 
 
      </div> 
 
      </div> 
 
     </td> 
 
     <td> 
 
      <div class="dummy"> 
 
      <div class="input-icon right"> 
 

 
       <input type="text" class="form-control quantity2" maxlength="25" name="purchase_quantity[]" id="quantity2"> 
 
      </div> 
 
      </div> 
 
     </td> 
 
     <td> 
 
      <div class="dummy"> 
 
      <div class="input-icon right"> 
 

 
       <input type="text" class="form-control" name="purchase_unit_rate[]" id="rate"> 
 
      </div> 
 
      </div> 
 
     </td> 
 
     <td> 
 
      <div class="dummy"> 
 
      <div class="input-icon right"> 
 

 
       <input type="text" class="form-control" name="purchase_unit_amount[]" id="tamnt"> 
 
      </div> 
 
      </div> 
 
     </td> 
 

 
     <td style="display:none;"> 
 
      <button class="remove_bank_row"> 
 
      Remove 
 
      </button> 
 
     </td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div>

私の作業フィドルです。あなたの提案や時間を

https://jsfiddle.net/jvk3/6ath5vy9/4/

感謝。

Answer 1

これは、jQueryのカスタムイベントとイベントの委任に適しています。

以下のコードはrecalcイベントをトリガテーブル内の何かが関連する変更（一度、ページの読み込みに。）

たびにイベントがDOMツリーをバブルアップし、それがピックアップされた場所に応じて、それは別の原因効果。行レベルでは、行合計を再計算します。テーブルレベルでは、総計が計算されます。

複数の要素にIDを使用しないでください。その代わりに、CSSクラスを使用して、複数回表示される要素にタグを付けます。

$('#add_bank_info').click(function() { 
 
    var ele = $('.bank_table tbody tr:last'); 
 
    var ele_clone = ele.clone(); 
 

 
    ele_clone.find('input, select').prop("disabled", false).val(''); 
 
    ele_clone.find('td div.dummy').removeClass('has-error has-success'); 
 
    ele_clone.find('td div.input-icon i').removeClass('fa-check fa-warning'); 
 
    ele_clone.find('td:last').show(); 
 
    ele.after(ele_clone); 
 
}); 
 

 
$(document).on("click", ".remove_bank_row", function() { 
 
    var $table = $(this).closest('table'); 
 
    $(this).closest('tr').remove(); 
 
    $table.trigger("recalc");  
 
}); 
 

 
$(document).on("keyup", ".bank_table input", function() { 
 
    $(this).trigger("recalc"); 
 
}); 
 

 
$(document).on("recalc", ".bank_table tr", function() { 
 
    var total = +$(this).find(".quantity2").val() * +$(this).find(".rate").val(); 
 
    $(this).find(".tamnt").val(total.toFixed(2)); 
 
}); 
 

 
$(document).on("recalc", ".bank_table", function() { 
 
    var grandTotal = 0; 
 
    $(this).find(".tamnt").each(function() { 
 
    grandTotal += +$(this).val(); 
 
    }); 
 
    $("#grandTotal").text(grandTotal.toFixed(2)); 
 
}); 
 

 
$(".bank_table").trigger("recalc");

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

 
<div class="col-sm-2"> 
 
    <button id="add_bank_info" class="addCF"><i class="fa fa-plus"></i>&nbsp;Add New</button> 
 
</div> 
 
<div class="table-scrollable form-body"> 
 
    <table class="table table-bordered table-striped table-hover bank_table"> 
 
    <thead> 
 
     <tr> 
 
     <th>Names</th> 
 
     <th>Quantity</th> 
 
     <th>Unit Rate</th> 
 
     <th>Total Amount</th> 
 
     <th>Delete</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
     <td> 
 
      <div class="dummy"> 
 
      <div class="input-icon right"> 
 
       <select name="pr_article_no[]" id="sp_name" class="form-control"> 
 
       <option value="">--Select Options--</option> 
 
       <option value="0"></option> 
 
       <option value="1">Item A</option> 
 
       <option value="2">Item B</option> 
 
       <option value="3">Item C</option> 
 
       </select> 
 
      </div> 
 
      </div> 
 
     </td> 
 
     <td> 
 
      <div class="dummy"> 
 
      <div class="input-icon right"> 
 
       <input type="text" class="form-control quantity2" size="5" name="purchase_quantity[]"> 
 
      </div> 
 
      </div> 
 
     </td> 
 
     <td> 
 
      <div class="dummy"> 
 
      <div class="input-icon right"> 
 
       <input type="text" class="form-control rate" size="5" name="purchase_unit_rate[]"> 
 
      </div> 
 
      </div> 
 
     </td> 
 
     <td> 
 
      <div class="dummy"> 
 
      <div class="input-icon right"> 
 
       <input type="text" class="form-control tamnt" size="7" name="purchase_unit_amount[]"> 
 
      </div> 
 
      </div> 
 
     </td> 
 
     <td> 
 
      <button class="remove_bank_row">Remove</button> 
 
     </td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
    <hr> 
 
    <div style="font-weight: bold">Grand total: <span id="grandTotal"></span></div> 
 
</div>

注：あなたのコードは、最後の行を削除することができますし、あなたのテーブルが壊れていることを後に。私はそのエラーを修正していません。