相同ID的总和不能从动态创建的输入字段中起作用。在这里，我想要动态创建id =＆＃34; tamnt＆＃34;的总和。谁能告诉我哪里有错误。你能解释清楚吗？
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> 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/
感谢您的建议和时间。
答案 0 :(得分：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> 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>
注意：您的代码允许删除最后一行，然后您的表被破坏。我没有修正那个错误。