我目前能够计算给定数字字段的值，并希望通过创建动态数字字段并通过其ID访问它们来执行相同操作。 这是表格的html片段：
<table class="table-responsive" id="purchaseScheduleTable">
<tr>
<td class="text-center"><span class="purchase_place"></span></td>
<td class="text-center"><span class="main_products_purch"></span></td>
<td class="text-center"><span class="frequency"></span></td>
<td class="text-center"><span class="low"></span></td>
<td class="text-center"><span class="high"></span></td>
<td class="text-center"><span class="average"></span></td>
<td class="text-center"><span class="total"></span></td>
</tr>
<tr>
<td><input type="text" name="purchase_place" data-id="purchase_place" style="width: 90%;"></td>
<td><input type="text" name="main_products_purch" style="width: 90%;" id="main_products_purch"></td>
<td><input type="number" name="freqency" style="width: 90%;" id="frequency"></td>
<td><input type="number" name="low" style="width: 90%;" id="product_low"></td>
<td><input type="number" name="high" style="width: 90%;" id="product_high"></td>
<td><input type="number" name="average" style="width: 90%;" id="product_average" disabled></td>
<td>
<div class = "input-group" id="addrow">
<input type="text" name="product_total" style="width: 90%;" id="product_total" disabled>
<span class = "input-group-addon" style="width:1%; background-color:#786bae;border-color:#786bae;">
<a href="#">
<span style="color:#FFFFFF;font-size:9px;line-height: 1.5;border-radius:0 !important;" class="glyphicon glyphicon-plus addrow" aria-hidden="true"></span>
</a>
</span>
</div>
</td>
</tr>
</table>
这是一个用于计算值的jquery代码片段：
function calculate(){
var low = 0;
var high = 0;
var average = 0;
var frequency= 0;
var total = 0;
frequency = ($('#frequency').val() == "") ? 0 :$('#frequency').val();
high = ($('#product_high').val() == "") ? 0 : $('#product_high').val();
low = ($('#product_low').val() == "") ? 0 : $('#product_low').val();
average = (parseInt(high) + parseInt(low))/2;
total = average * frequency;
$('#product_total').val(total);
$('#product_average').val(average);};
以下是用于触发计算的代码片段：
$('input[type=number]').focusout(function() {
calculate();
});
我已经成功创建了动态字段，并且能够毫无问题地计算第一行。我能够添加新的表行没有问题。但是，当尝试进行相同的计算时，第一次没有任何反应。以下是动态添加表格行的代码：
$('#addrow').click(function (e) {
e.preventDefault();
var purchase_schedule_row = '<tr><td><input type="text" name="purchase_place" id="purchase_place" style="width: 90%;"></td><td><input type="text" name="main_products_purch" style="width: 90%;" id="main_products_purch"></td> <td><input type="number" name="freqency" style="width: 90%;" id="frequency"></td><td><input type="number" name="low" style="width: 90%;" id="product_low"></td> <td><input type="number" name="high" style="width: 90%;" id="product_high"></td> <td><input type="number" name="average" style="width: 90%;" id="product_average" disabled></td><td> <div class = "input-group" id="addrow"> <input type="text" name="total" style="width: 90%;" id="product_total" disabled><span class = "input-group-addon" style="width:1%; background-color:#ec6d65;border-color:#ec6d65;"><a href="#"> <span style="color:#FFFFFF;font-size:9px;line-height: 1.5;border-radius:0 !important;" class="glyphicon glyphicon-minus deleterow" aria-hidden="true"></span></a></span></div></td></tr>';
$('#purchaseScheduleTable').append(purchase_schedule_row);
});
我做错了什么？提前谢谢。
答案 0 :(得分：1)
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('#addrow1').click(function (e) {
e.preventDefault();
var purchase_schedule_row = '<tr><td><input type="text" name="purchase_place" class="purchase_place" style="width: 90%;"></td><td><input type="text" name="main_products_purch" style="width: 90%;" class="main_products_purch"></td> <td><input type="number" name="freqency" style="width: 90%;" class="frequency"></td><td><input type="number" name="low" style="width: 90%;" class="product_low"></td> <td><input type="number" name="high" style="width: 90%;" class="product_high"></td> <td><input type="number" name="average" style="width: 90%;" class="product_average" disabled></td><td> <div class = "input-group" id="addrow"> <input type="text" name="total" style="width: 90%;" class="product_total" disabled><span class = "input-group-addon" style="width:1%; background-color:#ec6d65;border-color:#ec6d65;"><a href="#"> <span style="color:#FFFFFF;font-size:9px;line-height: 1.5;border-radius:0 !important;" class="glyphicon glyphicon-minus deleterow" aria-hidden="true"></span></a></span></div></td></tr>';
$('#purchaseScheduleTable').append(purchase_schedule_row);
});
$(document).on('focusout','input[type=number]',function () {
calculate($(this).closest('tr'));
});
function calculate(ObjRow) {
var low = 0;
var high = 0;
var average = 0;
var frequency = 0;
var total = 0;
frequency = ($(ObjRow).find('.frequency').val() == "") ? 0 : $(ObjRow).find('.frequency').val();
high = ($(ObjRow).find('.product_high').val() == "") ? 0 : $(ObjRow).find('.product_high').val();
low = ($(ObjRow).find('.product_low').val() == "") ? 0 : $(ObjRow).find('.product_low').val();
average = (parseInt(high) + parseInt(low)) / 2;
console.info(frequency);
console.info(high);
console.info(low);
total = average * frequency;
$(ObjRow).find('.product_total').val(total);
$(ObjRow).find('.product_average').val(average);
}
});
</script>
<body>
<input type="button" id="addrow1" value="Add Row"/>
<table class="table-responsive" id="purchaseScheduleTable">
<tr>
<td class="text-center"><span class="purchase_place">purchase_place</span></td>
<td class="text-center"><span class="main_products_purch">main_products_purch</span></td>
<td class="text-center"><span class="frequency">frequency</span></td>
<td class="text-center"><span class="low">low</span></td>
<td class="text-center"><span class="high">high</span></td>
<td class="text-center"><span class="average">average</span></td>
<td class="text-center"><span class="total">total</span></td>
</tr>
<tr>
<td><input type="text" name="purchase_place" data-id="purchase_place" style="width: 90%;"></td>
<td><input type="text" name="main_products_purch" style="width: 90%;" class="main_products_purch"></td>
<td><input type="number" name="freqency" style="width: 90%;" class="frequency"></td>
<td><input type="number" name="low" style="width: 90%;" class="product_low"></td>
<td><input type="number" name="high" style="width: 90%;" class="product_high"></td>
<td><input type="number" name="average" style="width: 90%;" class="product_average" disabled></td>
<td>
<div class = "input-group" id="addrow">
<input type="text" name="product_total" style="width: 90%;" class="product_total" disabled>
<span class = "input-group-addon" style="width:1%; background-color:#786bae;border-color:#786bae;">
<a href="#">
<span style="color:#FFFFFF;font-size:9px;line-height: 1.5;border-radius:0 !important;" class="glyphicon glyphicon-plus addrow" aria-hidden="true"></span>
</a>
</span>
</div>
</td>
</tr>
</table>
</body>
</html>