我正在尝试使用jQuery进行基本数学运算以及动态添加表格的额外行。我目前的代码如下:
$(document).ready(
function() {
$(".sub").focusout( //get it using class
function() {
var parent = $(this).closest('.row_to_clone');
parent.find(".net").html('');
var gross = parent.find('.gross').val();
var tare = parent.find('.tare').val();
var net = (gross - tare);
net = Math.round(net * 1000) / 1000;
parent.find(".net").html(net);
});
$(".sub1").focusout(function() {
$(".total").html('');
var net = parseFloat($(".net").text());
var ppp = parseFloat($(".ppp").val());
var total = net * ppp;
$(".total").html(Math.round(total * 1000) / 1000);
});
$("#add").click(
function() {
var newRow = $('#lineItemTable tbody>tr:last')
.clone(true).insertAfter(
'#lineItemTable tbody>tr:last');
newRow.find('input').val('');
newRow.find('p').text('');
return false;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="add">add Line</a>
<table id="lineItemTable">
<tr>
<th>Gross</th>
<th>Tare</th>
<th>Net</th>
<th>Price Per Pound</th>
<th>Total cost</th>
</tr>
<tr class="row_to_clone">
<td>
<input type='number' step="any" name='gross' class='gross sub' />
</td>
<td>
<input type='number' step="any" name='tare' class='tare sub' />
</td>
<td>
<p class='net'></p>
</td>
<td>
<input type="number" step="any" name="ppp" class='ppp sub1' />
</td>
<td id="calculated">
<p class='total'></p>
</td>
</tr>
</table>
如您所见,当我添加多行时,total cost
未正确计算。
total cost
的计算方法如下:Net
= (Gross - Tare)
和Total Cost
= Net
* price per pound
只有在我有一行数据时才会返回正确的结果。我错过了什么?
答案 0 :(得分:1)
您需要使用相对于当前行的选择器。您可以在.sub
代码中正确执行此操作,但不能.sub1
。
$(document).ready(
function() {
$(".sub").focusout( //get it using class
function() {
var parent = $(this).closest('.row_to_clone');
parent.find(".net").html('');
var gross = parent.find('.gross').val();
var tare = parent.find('.tare').val();
var net = (gross - tare);
net = Math.round(net * 1000) / 1000;
parent.find(".net").html(net);
});
$(".sub1").focusout(function() {
var parent = $(this).closest('.row_to_clone');
parent.find(".total").html('');
var net = parseFloat(parent.find(".net").text());
var ppp = parseFloat(parent.find(".ppp").val());
var total = net * ppp;
parent.find(".total").html(Math.round(total * 1000) / 1000);
});
$("#add").click(
function() {
var newRow = $('#lineItemTable tbody>tr:last')
.clone(true).insertAfter(
'#lineItemTable tbody>tr:last');
newRow.find('input').val('');
newRow.find('p').text('');
return false;
});
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="add">add Line</a>
<table id="lineItemTable">
<tr>
<th>Gross</th>
<th>Tare</th>
<th>Net</th>
<th>Price Per Pound</th>
<th>Total cost</th>
</tr>
<tr class="row_to_clone">
<td>
<input type='number' step="any" name='gross' class='gross sub' />
</td>
<td>
<input type='number' step="any" name='tare' class='tare sub' />
</td>
<td>
<p class='net'></p>
</td>
<td>
<input type="number" step="any" name="ppp" class='ppp sub1' />
</td>
<td id="calculated">
<p class='total'></p>
</td>
</tr>
</table>
&#13;