如何從動態創建的輸入字段中加上相同的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>

注：您的代碼，可除去最後一行之後，你的表壞了。我沒有修復這個錯誤。