如何获取每行的值并进行小计计算

Question

Fiddle当用户输入数量、单价和税款时，我已经对多行进行了计算。但现在我想得到每一行的金额和税额来计算小计、税额、总额，我该怎么办？有什么建议吗？我需要使用$.each(函数)来获取oredr中的每一行数据来计算它们吗？

示例我想要的结果。

Qty| UnitPrice | Tax | Tax Amount | Amount
1  | 10.00     | 2   |   0.2      | 10.00
1  | 20.00     | 3   |   0.6      | 20.00
|   Subtotal | 30.00
|   Tax      |  0.80
| TotalAmount| 30.80

我的编码部分

<table>
<thead>
<tr>
<th>Action</th>
<th>Description</th>
<th>Qty</th>
<th>Unit Price</th>
<th>Tax</th>
<th>Tax Amount</th>
<th>Amount</th>
</tr>
</thead>
<tbody class="items_table">
<tr class="item-row">
<td><button id="delete" href="javascript:;" onclick="deleteRow(this)" title="Remove row">Delete</button></td>
<td><input class="form-control row-desc" id="desc" rows="1"></td>
<td><input class="form-control tx-right row-qty" type="text" id="qty" value="0"></td>
<td><input class="form-control tx-right row-unitprice" type="text" id="unitprice" value="0"></td>
<td>
<input class="form-control tx-right row-tax" type="text" id="tax"></td>
<td>
<input class="form-control tx-right row-taxamount" type="text" id="amounttax" disabled></td>
<td><input class="form-control tx-right row-amount" type="text" id="amount" disabled></td>
</tr>
</tbody>
<tfoot>
<tr id="hiderow">
<td colspan="7" class="tx-center tx-15"><b><a id="addrow" href="javascript:;" title="Add a row"></i>Add an Item</a></b></td>
</tr>
<tr>
<td class="valign-middle" colspan="5" rowspan="7">
<!-- invoice-notes -->
</td>
<td>Sub-Total</td>
<td class="colspan-2">
<input class="form-control" type="text" placeholder="RM 0.00" id="subtotal"></td>
</tr>
<tr>
<td class="tx-right">Tax</td>
<td class="tx-right" colspan="2">
<input class="form-control" type="text" placeholder="RM 0.00" id="tax"></td>
</tr>
<tr>
<td>Total Amount</td>
<td colspan="2">
<input class="form-control input-sm tx-right" type="text" value="0" id="total">
</td>
</tr>
</tfoot>
</table>
<br><br>

$(document).ready(function() {
AddItem();
$('#addrow').click(function() {
addItem();
});
$('.delete-row').click(function() {
deleteRow(btn);
});

});
function deleteRow(btn) {
var row = btn.parentNode.parentNode;
var next = row.parentNode.rows[row.rowIndex + 0];
row.parentNode.removeChild(next);
row.parentNode.removeChild(row);
}

$(document).on('keyup', '.row-unitprice, .row-qty, .row-tax', function (e) {
var $row = $(this).closest("tr"); //this is the closest common root of the input elements
var qty = parseFloat($row.find('input.row-qty').val());
var unitprice = parseFloat($row.find('input.row-unitprice').val());
var tax = parseFloat($row.find('input.row-tax').val());

Itemamount = (qty * unitprice) || 0; 
Taxamount = (Itemamount * tax / 100) || 0; 
$row.find('input.row-amount').val(Itemamount.toFixed(2));  
$row.find('input.row-taxamount').val(Taxamount.toFixed(2));

});

Answer 1

您可以使用.each循环来迭代trs，并使用+=将税和总值添加到某个变量中，然后最终在所需的输入中显示结果

演示代码 :

$(document).on('keyup', '.row-unitprice, .row-qty, .row-tax', function(e) {
var $row = $(this).closest("tr"); //this is the closest common root of the input elements
var qty = parseFloat($row.find('input.row-qty').val());
var unitprice = parseFloat($row.find('input.row-unitprice').val());
var tax = parseFloat($row.find('input.row-tax').val());
Itemamount = (qty * unitprice) || 0;
Taxamount = (Itemamount * tax / 100) || 0;
SubTotal =
$row.find('input.row-amount').val(Itemamount.toFixed(2));
$row.find('input.row-taxamount').val(Taxamount.toFixed(2));
var total = 0,
tax_total = 0,
grand_total = 0;
//loop thrugh trs
$(".item-row").each(function() {
//add total & tax
total += $(this).find(".row-amount").val() != "" ? parseFloat($(this).find(".row-amount").val()) : 0
tax_total += $(this).find(".row-taxamount").val() != "" ? parseFloat($(this).find(".row-taxamount").val()) : 0
})
grand_total = parseFloat(total + tax_total);
//add result to inputs
$("#subtotal").val(total.toFixed(2))
$(".tax").val(tax_total.toFixed(2))
$("#total").val(grand_total.toFixed(2))
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Action</th>
<th>Description</th>
<th>Qty</th>
<th>Unit Price</th>
<th>Tax</th>
<th>Tax Amount</th>
<th>Amount</th>
</tr>
</thead>
<tbody class="items_table">
<tr class="item-row">
<td><button id="delete" href="javascript:;" onclick="deleteRow(this)" title="Remove row">Delete</button></td>
<td><input class="form-control row-desc" id="desc" rows="1"></td>
<td><input class="form-control tx-right row-qty" type="text" id="qty" value="0"></td>
<td><input class="form-control tx-right row-unitprice" type="text" id="unitprice" value="0"></td>
<td>
<input class="form-control tx-right row-tax" type="text" id="tax"></td>
<td>
<input class="form-control tx-right row-taxamount" type="text" id="amounttax" disabled></td>
<td><input class="form-control tx-right row-amount" type="text" id="amount" disabled></td>
</tr>
<tr class="item-row">
<td><button id="delete" href="javascript:;" onclick="deleteRow(this)" title="Remove row">Delete</button></td>
<td><input class="form-control row-desc" rows="1"></td>
<td><input class="form-control tx-right row-qty" type="text" value="0"></td>
<td><input class="form-control tx-right row-unitprice" type="text" value="0"></td>
<td>
<input class="form-control tx-right row-tax" type="text"></td>
<td>
<input class="form-control tx-right row-taxamount" type="text" disabled></td>
<td><input class="form-control tx-right row-amount" type="text" disabled></td>
</tr>
</tbody>
<tfoot>
<tr id="hiderow">
<td colspan="7" class="tx-center tx-15"><b><a id="addrow" href="javascript:;" title="Add a row"><a>Add an Item</a></b></td>
</tr>
<tr>
<td class="valign-middle" colspan="5" rowspan="7">
<!-- invoice-notes -->
</td>
<td>Sub-Total</td>
<td class="colspan-2">
<input class="form-control" type="text" placeholder="RM 0.00" id="subtotal"></td>
</tr>
<tr>
<td class="tx-right">Tax</td>
<td class="tx-right" colspan="2">
<input class="form-control tax" type="text" placeholder="RM 0.00"></td>
</tr>
<tr>
<td>Total Amount</td>
<td colspan="2">
<input class="form-control input-sm tx-right" type="text" value="0" id="total">
</td>
</tr>
</tfoot>
</table>
<br><br>