使用 jquery 的附加行计算不起作用
Appended row calculation using jquery not working
我正在尝试计算附加行中的值。但是,计算脚本不起作用。 jquery-slim 和 jquery 有冲突吗?我正在为此项目使用 bootstrap 4 和 laravel 框架。我为此计算尝试了各种 jquery 脚本。但是,没有任何工作。请有人帮我完成计算。
var item_row = '{{ $item_row }}';
function addItem() {
html = '<tr id="item-row-' + item_row + '">';
html += '<td class="text-center" style="vertical-align: middle;">';
html += '<button type="button" onclick="$(\'#item-row-' + item_row + '\').remove()" title="Delete" class="btn btn-xs btn-danger"><i class="fa fa-trash"></i></button>';
html += '</td>';
html += '<td>';
html += '<select class="form-control select2" name="item[' + item_row + '][item_id]" id="item-item_id-' + item_row + '">';
html += '<option selected="selected" value="">Select</option>';
html += '<option value="item1">item1</option>';
html += '<option value="item2">item2</option>';
html += '<option value="item3">item3</option>';
html += '<option value="item4">item4</option>';
html += '<input name="item[' + item_row + '][item_id]" type="hidden" id="item-id-' + item_row + '">';
html += '</td>';
html += '<td>';
html += '<input class="form-control text-right" required="required" name="item[' + item_row + '][unit_price]" type="text" id="item-unit_price-' + item_row + '">';
html += '</td>';
html += '<td>';
html += '<input class="form-control text-right" required="required" name="item[' + item_row + '][purchase_price]" type="text" id="item-purchase_price-' + item_row + '">';
html += '</td>';
html += '<td>';
html += '<input class="form-control text-right" required="required" name="item[' + item_row + '][tax_rate]" type="text" id="item-tax_rate-' + item_row + '">';
html += '</td>';
html += '<td>';
html += '<input class="form-control text-right" required="required" name="item[' + item_row + '][discount_amount]" type="text" id="item-discount_amount-' + item_row + '">';
html += ' </td>';
html += '<td>';
html += '<input class="form-control text-right" required="required" name="item[' + item_row + '][sale_price]" type="text" id="item-sale_price-' + item_row + '">';
html += '</td>';
html += '<td>';
html += '<input class="form-control text-right" required="required" name="item[' + item_row + '][quantity]" type="text" id="item-quantity-' + item_row + '">';
html += '</td>';
html += '<td>';
html += '<input class="form-control text-right" required="required" name="item[' + item_row + '][return_quantity]" type="text" id="item-return_quantity-' + item_row + '">';
html += '</td>';
html += '<td>';
html += '<input class="form-control text-right" required="required" name="item[' + item_row + '][total_price]" type="text" id="item-total_price-' + item_row + '">';
html += '</td>';
html += '</tr>';
$('#items tbody #addItem').before(html);
item_row++;
}
function update_amounts() {
var sum = 0.0;
$('#items > tbody > tr').each(function() {
var qty = $(this).find('.quantity').val();
var price = $(this).find('.sale_price').val();
var amount = (qty * price)
sum += amount;
$(this).find('.sub_total').text('' + amount);
});
//just update the total to sum
$('.grand_total').text(sum);
}
$('.quantity').change(function() {
update_amounts();
});
<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table class="table table-bordered table-responsive" id="items">
<thead>
<tr style="background-color: #f9f9f9;">
<th width="5%" class="text-center">Actions</th>
<th width="10%" class="text-left">Item</th>
<th width="8%" class="text-left">Unit Price</th>
<th width="11%" class="text-left">Purchase Price</th>
<th width="8%" class="text-left">Tax Rate</th>
<th width="5%" class="text-right">Discount(%)</th>
<th width="10%" class="text-right">Sale Price</th>
<th width="5%" class="text-right">Quantity</th>
<th width="13%" class="text-right">Return Quantity</th>
<th width="10%" class="text-right">Total Price</th>
</tr>
</thead>
<tbody>
<?php $item_row = 0; ?>
<tr id="item-row-{{ $item_row }}">
<td class="text-center" style="vertical-align: middle;">
<button type="button" onclick="$(\'#item-row-' + item_row + '\').remove();" title="Delete" class="btn btn-xs btn-danger"><i class="fa fa-trash"></i></button>
</td>
<td>
<select class="form-control select2 typeahead" required="required" name="item[{{ $item_row }}][item_id]" id="item-item_id-{{ $item_row }}">
<option>Select</option>
<option value="item1">item1</option>
<option value="item2">item2</option>
<option value="item3">item3</option>
<option value="item4">item4</option>
</select>
<input name="item[{{ $item_row }}][item_id]" type="hidden" id="item-id-{{ $item_row }}">
</td>
<td>
<input class="form-control text-right" required="required" name="item[{{ $item_row }}][unit_price]" type="text" id="item-unit_price-{{ $item_row }}">
</td>
<td>
<input class="form-control text-right" required="required" name="item[{{ $item_row }}][purchase_price]" type="text" id="item-purchase_price-{{ $item_row }}">
</td>
<td>
<input class="form-control text-right" required="required" name="item[{{ $item_row }}][tax_rate]" type="text" id="item-tax_rate-{{ $item_row }}">
</td>
<td>
<input class="form-control text-right" required="required" name="item[{{ $item_row }}][discount_amount]" type="text" id="item-discount_amount-{{ $item_row }}">
</td>
<td>
<input class="form-control text-right sale_price" required="required" name="item[{{ $item_row }}][sale_price]" type="text" id="item-sale_price-{{ $item_row }}">
</td>
<td>
<input class="form-control text-right quantity" required="required" name="item[{{ $item_row }}][quantity]" type="text" id="item-quantity-{{ $item_row }}">
</td>
<td>
<input class="form-control text-right" required="required" name="item[{{ $item_row }}][return_quantity]" type="text" id="item-return_quantity-{{ $item_row }}">
</td>
<td>
<input class="form-control text-right" required="required" name="item[{{ $item_row }}][total_price]" type="text" id="item-total_price-{{ $item_row }}">
</td>
</tr>
<?php $item_row++; ?>
<tr id="addItem">
<td class="text-center"><button type="button" onclick="addItem();" title="Add" class="btn btn-xs btn-primary" data-original-title="Add"><i class="fa fa-plus"></i></button></td>
</tr>
<tr>
<td colspan="8"></td>
<td class="text-right align-middle"><strong>Sub Total</strong></td>
<td>
<input type="text" name="sub_total" id="sub_total" class="form-control text-right sub_total">
</td>
</tr>
<tr>
<td colspan="8"></td>
<td class="text-right align-middle"><strong>Tax Amount</strong></td>
<td>
<input type="text" name="tax_amount" id="tax_amount" class="form-control text-right">
</td>
</tr>
<tr>
<td colspan="8"></td>
<td class="text-right align-middle"><strong>Discount Amount</strong></td>
<td>
<input type="text" name="discount_amount" id="discount_amount" class="form-control text-right">
</td>
</tr>
<tr>
<td colspan="8"></td>
<td class="text-right align-middle"><strong>Grand Total</strong></td>
<td>
<input type="text" name="grand_total" id="grand_total" class="form-control text-right grand_total">
</td>
</tr>
<tr>
<td colspan="8"></td>
<td class="text-right align-middle"><strong>Cash Received</strong></td>
<td>
<input type="text" name="cash_received" id="cash_received" class="form-control text-right">
</td>
</tr>
<tr>
<td colspan="8"></td>
<td class="text-right align-middle"><strong>Cash Refund</strong></td>
<td>
<input type="text" name="cash_refund" id="cash_refund" class="form-control text-right">
</td>
</tr>
<tr>
<td colspan="8"></td>
<td class="text-right"><a href="" class="btn btn-warning">Clear</a></td>
<td><button type="submit" class="btn btn-primary">Save</button></td>
</tr>
</tbody>
</table>
尽管您的问题有些不清楚和不完整,但我设法找出了导致错误的原因,即
$('#items > tbody > tr').each(function() {
});
以上,包括 tbody
中的所有 tr
意味着包括具有以下行的行:
小计、税额、折扣金额、总计、收到的现金和现金退款。
没有数量 input
所以,这会导致未定义的错误,当您在控制台中记录 qty
变量时可以看到该错误。我已经针对给定的错误更正了您的代码段,并简单地记录了计算 (您可以自己将这些添加到输入值中),附在我的答案中以供参考。
建议:你应该附上类似的更改销售价格的功能,以防用户先填写数量或以其他方式处理此异常。
var item_row = '{{ $item_row }}';
function addItem(){
html = '<tr class="data_entry" id="item-row-' + item_row + '">';
html += '<td class="text-center" style="vertical-align: middle;">';
html += '<button type="button" onclick="$(\'#item-row-' + item_row + '\').remove()" title="Delete" class="btn btn-xs btn-danger"><i class="fa fa-trash"></i></button>';
html += '</td>';
html += '<td>';
html += '<select class="form-control select2" name="item[' + item_row + '][item_id]" id="item-item_id-' + item_row + '">';
html += '<option selected="selected" value="">Select</option>';
html += '<option value="item1">item1</option>';
html += '<option value="item2">item2</option>';
html += '<option value="item3">item3</option>';
html += '<option value="item4">item4</option>';
html += '<input name="item[' + item_row + '][item_id]" type="hidden" id="item-id-' + item_row + '">';
html += '</td>';
html += '<td>';
html += '<input class="form-control text-right" required="required" name="item[' + item_row + '][unit_price]" type="text" id="item-unit_price-' + item_row + '">';
html += '</td>';
html += '<td>';
html += '<input class="form-control text-right" required="required" name="item[' + item_row + '][purchase_price]" type="text" id="item-purchase_price-' + item_row + '">';
html += '</td>';
html += '<td>';
html += '<input class="form-control text-right" required="required" name="item[' + item_row + '][tax_rate]" type="text" id="item-tax_rate-' + item_row + '">';
html += '</td>';
html += '<td>';
html += '<input class="form-control text-right" required="required" name="item[' + item_row + '][discount_amount]" type="text" id="item-discount_amount-' + item_row + '">';
html += ' </td>';
html += '<td>';
html += '<input class="form-control text-right sale_price" required="required" name="item[' + item_row + '][sale_price]" type="text" id="item-sale_price-' + item_row + '">';
html += '</td>';
html += '<td>';
html += '<input class="form-control text-right quantity" required="required" name="item[' + item_row + '][quantity]" type="text" id="item-quantity-' + item_row + '">';
html += '</td>';
html += '<td>';
html += '<input class="form-control text-right" required="required" name="item[' + item_row + '][return_quantity]" type="text" id="item-return_quantity-' + item_row + '">';
html += '</td>';
html += '<td>';
html += '<input class="form-control text-right" required="required" name="item[' + item_row + '][total_price]" type="text" id="item-total_price-' + item_row + '">';
html += '</td>';
html += '</tr>';
$('#items tbody #addItem').before(html);
item_row++;
}
function update_amounts(){
var sum = 0.0;
$('#items > tbody > tr.data_entry').each(function() {
var qty = $(this).find('.quantity').val();
// console.log(qty);
var price = $(this).find('.sale_price').val();
var amount = (qty*price)
sum+=amount;
// console.log(price);
console.log("Sub Total: " + amount);
$('.sub_total').text(''+amount);
});
console.log("Grand Total: " + sum);
//just update the total to sum
$('.grand_total').text(sum);
}
$('table#items tbody').on("change","tr .quantity",function() {
//var qty = $(this).val();
// alert("Change");
update_amounts();
});
<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table class="table table-bordered table-responsive" id="items">
<thead>
<tr style="background-color: #f9f9f9;">
<th width="5%" class="text-center">Actions</th>
<th width="10%" class="text-left">Item</th>
<th width="8%" class="text-left">Unit Price</th>
<th width="11%" class="text-left">Purchase Price</th>
<th width="8%" class="text-left">Tax Rate</th>
<th width="5%" class="text-right">Discount(%)</th>
<th width="10%" class="text-right">Sale Price</th>
<th width="5%" class="text-right">Quantity</th>
<th width="13%" class="text-right">Return Quantity</th>
<th width="10%" class="text-right">Total Price</th>
</tr>
</thead>
<tbody>
<?php $item_row = 0; ?>
<tr class="data_entry" id="item-row-{{ $item_row }}">
<td class="text-center" style="vertical-align: middle;">
<button type="button" onclick="$(\'#item-row-' + item_row + '\').remove();" title="Delete" class="btn btn-xs btn-danger"><i class="fa fa-trash"></i></button>
</td>
<td>
<select class="form-control select2 typeahead" required="required" name="item[{{ $item_row }}][item_id]" id="item-item_id-{{ $item_row }}">
<option>Select</option>
<option value="item1">item1</option>
<option value="item2">item2</option>
<option value="item3">item3</option>
<option value="item4">item4</option>
</select>
<input name="item[{{ $item_row }}][item_id]" type="hidden" id="item-id-{{ $item_row }}">
</td>
<td>
<input class="form-control text-right" required="required" name="item[{{ $item_row }}][unit_price]" type="text" id="item-unit_price-{{ $item_row }}">
</td>
<td>
<input class="form-control text-right" required="required" name="item[{{ $item_row }}][purchase_price]" type="text" id="item-purchase_price-{{ $item_row }}">
</td>
<td>
<input class="form-control text-right" required="required" name="item[{{ $item_row }}][tax_rate]" type="text" id="item-tax_rate-{{ $item_row }}">
</td>
<td>
<input class="form-control text-right" required="required" name="item[{{ $item_row }}][discount_amount]" type="text" id="item-discount_amount-{{ $item_row }}">
</td>
<td>
<input class="form-control text-right sale_price" required="required" name="item[{{ $item_row }}][sale_price]" type="text" id="item-sale_price-{{ $item_row }}">
</td>
<td>
<input class="form-control text-right quantity" required="required" name="item[{{ $item_row }}][quantity]" type="text" id="item-quantity-{{ $item_row }}">
</td>
<td>
<input class="form-control text-right" required="required" name="item[{{ $item_row }}][return_quantity]" type="text" id="item-return_quantity-{{ $item_row }}">
</td>
<td>
<input class="form-control text-right" required="required" name="item[{{ $item_row }}][total_price]" type="text" id="item-total_price-{{ $item_row }}" >
</td>
</tr>
<?php $item_row++; ?>
<tr id="addItem">
<td class="text-center"><button type="button" onclick="addItem();" title="Add" class="btn btn-xs btn-primary" data-original-title="Add"><i class="fa fa-plus"></i></button></td>
</tr>
<tr>
<td colspan="8"></td>
<td class="text-right align-middle"><strong>Sub Total</strong></td>
<td>
<input type="text" name="sub_total" id="sub_total" class="form-control text-right sub_total">
</td>
</tr>
<tr>
<td colspan="8"></td>
<td class="text-right align-middle"><strong>Tax Amount</strong></td>
<td>
<input type="text" name="tax_amount" id="tax_amount" class="form-control text-right">
</td>
</tr>
<tr>
<td colspan="8"></td>
<td class="text-right align-middle"><strong>Discount Amount</strong></td>
<td>
<input type="text" name="discount_amount" id="discount_amount" class="form-control text-right">
</td>
</tr>
<tr>
<td colspan="8"></td>
<td class="text-right align-middle"><strong>Grand Total</strong></td>
<td>
<input type="text" name="grand_total" id="grand_total" class="form-control text-right grand_total">
</td>
</tr>
<tr>
<td colspan="8"></td>
<td class="text-right align-middle"><strong>Cash Received</strong></td>
<td>
<input type="text" name="cash_received" id="cash_received" class="form-control text-right">
</td>
</tr>
<tr>
<td colspan="8"></td>
<td class="text-right align-middle"><strong>Cash Refund</strong></td>
<td>
<input type="text" name="cash_refund" id="cash_refund" class="form-control text-right">
</td>
</tr>
<tr>
<td colspan="8"></td>
<td class="text-right"><a href="" class="btn btn-warning">Clear</a></td>
<td><button type="submit" class="btn btn-primary">Save</button></td>
</tr>
</tbody>
</table>
请尝试以下更改
$('.quantity').change(function() {
update_amounts();
});
$(document).on("change",".quantity",function() {
update_amounts();
});
并在 html
中添加 class "product_row" tr
<tr id="item-row-<?php echo $item_row; ?>" class="product_row">
也在 addItem 函数中
html = '<tr id="item-row-' + item_row + '" class="product_row">';
更改每个函数
$('#items > tbody > tr.product_row').each(function() {
var qty = $(this).find('.quantity').val();
var price = $(this).find('.sale_price').val();
var amount = (qty*price)
sum+=amount;
$('.sub_total').val(amount);
});
我正在尝试计算附加行中的值。但是,计算脚本不起作用。 jquery-slim 和 jquery 有冲突吗?我正在为此项目使用 bootstrap 4 和 laravel 框架。我为此计算尝试了各种 jquery 脚本。但是,没有任何工作。请有人帮我完成计算。
var item_row = '{{ $item_row }}';
function addItem() {
html = '<tr id="item-row-' + item_row + '">';
html += '<td class="text-center" style="vertical-align: middle;">';
html += '<button type="button" onclick="$(\'#item-row-' + item_row + '\').remove()" title="Delete" class="btn btn-xs btn-danger"><i class="fa fa-trash"></i></button>';
html += '</td>';
html += '<td>';
html += '<select class="form-control select2" name="item[' + item_row + '][item_id]" id="item-item_id-' + item_row + '">';
html += '<option selected="selected" value="">Select</option>';
html += '<option value="item1">item1</option>';
html += '<option value="item2">item2</option>';
html += '<option value="item3">item3</option>';
html += '<option value="item4">item4</option>';
html += '<input name="item[' + item_row + '][item_id]" type="hidden" id="item-id-' + item_row + '">';
html += '</td>';
html += '<td>';
html += '<input class="form-control text-right" required="required" name="item[' + item_row + '][unit_price]" type="text" id="item-unit_price-' + item_row + '">';
html += '</td>';
html += '<td>';
html += '<input class="form-control text-right" required="required" name="item[' + item_row + '][purchase_price]" type="text" id="item-purchase_price-' + item_row + '">';
html += '</td>';
html += '<td>';
html += '<input class="form-control text-right" required="required" name="item[' + item_row + '][tax_rate]" type="text" id="item-tax_rate-' + item_row + '">';
html += '</td>';
html += '<td>';
html += '<input class="form-control text-right" required="required" name="item[' + item_row + '][discount_amount]" type="text" id="item-discount_amount-' + item_row + '">';
html += ' </td>';
html += '<td>';
html += '<input class="form-control text-right" required="required" name="item[' + item_row + '][sale_price]" type="text" id="item-sale_price-' + item_row + '">';
html += '</td>';
html += '<td>';
html += '<input class="form-control text-right" required="required" name="item[' + item_row + '][quantity]" type="text" id="item-quantity-' + item_row + '">';
html += '</td>';
html += '<td>';
html += '<input class="form-control text-right" required="required" name="item[' + item_row + '][return_quantity]" type="text" id="item-return_quantity-' + item_row + '">';
html += '</td>';
html += '<td>';
html += '<input class="form-control text-right" required="required" name="item[' + item_row + '][total_price]" type="text" id="item-total_price-' + item_row + '">';
html += '</td>';
html += '</tr>';
$('#items tbody #addItem').before(html);
item_row++;
}
function update_amounts() {
var sum = 0.0;
$('#items > tbody > tr').each(function() {
var qty = $(this).find('.quantity').val();
var price = $(this).find('.sale_price').val();
var amount = (qty * price)
sum += amount;
$(this).find('.sub_total').text('' + amount);
});
//just update the total to sum
$('.grand_total').text(sum);
}
$('.quantity').change(function() {
update_amounts();
});
<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table class="table table-bordered table-responsive" id="items">
<thead>
<tr style="background-color: #f9f9f9;">
<th width="5%" class="text-center">Actions</th>
<th width="10%" class="text-left">Item</th>
<th width="8%" class="text-left">Unit Price</th>
<th width="11%" class="text-left">Purchase Price</th>
<th width="8%" class="text-left">Tax Rate</th>
<th width="5%" class="text-right">Discount(%)</th>
<th width="10%" class="text-right">Sale Price</th>
<th width="5%" class="text-right">Quantity</th>
<th width="13%" class="text-right">Return Quantity</th>
<th width="10%" class="text-right">Total Price</th>
</tr>
</thead>
<tbody>
<?php $item_row = 0; ?>
<tr id="item-row-{{ $item_row }}">
<td class="text-center" style="vertical-align: middle;">
<button type="button" onclick="$(\'#item-row-' + item_row + '\').remove();" title="Delete" class="btn btn-xs btn-danger"><i class="fa fa-trash"></i></button>
</td>
<td>
<select class="form-control select2 typeahead" required="required" name="item[{{ $item_row }}][item_id]" id="item-item_id-{{ $item_row }}">
<option>Select</option>
<option value="item1">item1</option>
<option value="item2">item2</option>
<option value="item3">item3</option>
<option value="item4">item4</option>
</select>
<input name="item[{{ $item_row }}][item_id]" type="hidden" id="item-id-{{ $item_row }}">
</td>
<td>
<input class="form-control text-right" required="required" name="item[{{ $item_row }}][unit_price]" type="text" id="item-unit_price-{{ $item_row }}">
</td>
<td>
<input class="form-control text-right" required="required" name="item[{{ $item_row }}][purchase_price]" type="text" id="item-purchase_price-{{ $item_row }}">
</td>
<td>
<input class="form-control text-right" required="required" name="item[{{ $item_row }}][tax_rate]" type="text" id="item-tax_rate-{{ $item_row }}">
</td>
<td>
<input class="form-control text-right" required="required" name="item[{{ $item_row }}][discount_amount]" type="text" id="item-discount_amount-{{ $item_row }}">
</td>
<td>
<input class="form-control text-right sale_price" required="required" name="item[{{ $item_row }}][sale_price]" type="text" id="item-sale_price-{{ $item_row }}">
</td>
<td>
<input class="form-control text-right quantity" required="required" name="item[{{ $item_row }}][quantity]" type="text" id="item-quantity-{{ $item_row }}">
</td>
<td>
<input class="form-control text-right" required="required" name="item[{{ $item_row }}][return_quantity]" type="text" id="item-return_quantity-{{ $item_row }}">
</td>
<td>
<input class="form-control text-right" required="required" name="item[{{ $item_row }}][total_price]" type="text" id="item-total_price-{{ $item_row }}">
</td>
</tr>
<?php $item_row++; ?>
<tr id="addItem">
<td class="text-center"><button type="button" onclick="addItem();" title="Add" class="btn btn-xs btn-primary" data-original-title="Add"><i class="fa fa-plus"></i></button></td>
</tr>
<tr>
<td colspan="8"></td>
<td class="text-right align-middle"><strong>Sub Total</strong></td>
<td>
<input type="text" name="sub_total" id="sub_total" class="form-control text-right sub_total">
</td>
</tr>
<tr>
<td colspan="8"></td>
<td class="text-right align-middle"><strong>Tax Amount</strong></td>
<td>
<input type="text" name="tax_amount" id="tax_amount" class="form-control text-right">
</td>
</tr>
<tr>
<td colspan="8"></td>
<td class="text-right align-middle"><strong>Discount Amount</strong></td>
<td>
<input type="text" name="discount_amount" id="discount_amount" class="form-control text-right">
</td>
</tr>
<tr>
<td colspan="8"></td>
<td class="text-right align-middle"><strong>Grand Total</strong></td>
<td>
<input type="text" name="grand_total" id="grand_total" class="form-control text-right grand_total">
</td>
</tr>
<tr>
<td colspan="8"></td>
<td class="text-right align-middle"><strong>Cash Received</strong></td>
<td>
<input type="text" name="cash_received" id="cash_received" class="form-control text-right">
</td>
</tr>
<tr>
<td colspan="8"></td>
<td class="text-right align-middle"><strong>Cash Refund</strong></td>
<td>
<input type="text" name="cash_refund" id="cash_refund" class="form-control text-right">
</td>
</tr>
<tr>
<td colspan="8"></td>
<td class="text-right"><a href="" class="btn btn-warning">Clear</a></td>
<td><button type="submit" class="btn btn-primary">Save</button></td>
</tr>
</tbody>
</table>
尽管您的问题有些不清楚和不完整,但我设法找出了导致错误的原因,即
$('#items > tbody > tr').each(function() {
});
以上,包括 tbody
中的所有 tr
意味着包括具有以下行的行:
小计、税额、折扣金额、总计、收到的现金和现金退款。
没有数量 input
所以,这会导致未定义的错误,当您在控制台中记录 qty
变量时可以看到该错误。我已经针对给定的错误更正了您的代码段,并简单地记录了计算 (您可以自己将这些添加到输入值中),附在我的答案中以供参考。
建议:你应该附上类似的更改销售价格的功能,以防用户先填写数量或以其他方式处理此异常。
var item_row = '{{ $item_row }}';
function addItem(){
html = '<tr class="data_entry" id="item-row-' + item_row + '">';
html += '<td class="text-center" style="vertical-align: middle;">';
html += '<button type="button" onclick="$(\'#item-row-' + item_row + '\').remove()" title="Delete" class="btn btn-xs btn-danger"><i class="fa fa-trash"></i></button>';
html += '</td>';
html += '<td>';
html += '<select class="form-control select2" name="item[' + item_row + '][item_id]" id="item-item_id-' + item_row + '">';
html += '<option selected="selected" value="">Select</option>';
html += '<option value="item1">item1</option>';
html += '<option value="item2">item2</option>';
html += '<option value="item3">item3</option>';
html += '<option value="item4">item4</option>';
html += '<input name="item[' + item_row + '][item_id]" type="hidden" id="item-id-' + item_row + '">';
html += '</td>';
html += '<td>';
html += '<input class="form-control text-right" required="required" name="item[' + item_row + '][unit_price]" type="text" id="item-unit_price-' + item_row + '">';
html += '</td>';
html += '<td>';
html += '<input class="form-control text-right" required="required" name="item[' + item_row + '][purchase_price]" type="text" id="item-purchase_price-' + item_row + '">';
html += '</td>';
html += '<td>';
html += '<input class="form-control text-right" required="required" name="item[' + item_row + '][tax_rate]" type="text" id="item-tax_rate-' + item_row + '">';
html += '</td>';
html += '<td>';
html += '<input class="form-control text-right" required="required" name="item[' + item_row + '][discount_amount]" type="text" id="item-discount_amount-' + item_row + '">';
html += ' </td>';
html += '<td>';
html += '<input class="form-control text-right sale_price" required="required" name="item[' + item_row + '][sale_price]" type="text" id="item-sale_price-' + item_row + '">';
html += '</td>';
html += '<td>';
html += '<input class="form-control text-right quantity" required="required" name="item[' + item_row + '][quantity]" type="text" id="item-quantity-' + item_row + '">';
html += '</td>';
html += '<td>';
html += '<input class="form-control text-right" required="required" name="item[' + item_row + '][return_quantity]" type="text" id="item-return_quantity-' + item_row + '">';
html += '</td>';
html += '<td>';
html += '<input class="form-control text-right" required="required" name="item[' + item_row + '][total_price]" type="text" id="item-total_price-' + item_row + '">';
html += '</td>';
html += '</tr>';
$('#items tbody #addItem').before(html);
item_row++;
}
function update_amounts(){
var sum = 0.0;
$('#items > tbody > tr.data_entry').each(function() {
var qty = $(this).find('.quantity').val();
// console.log(qty);
var price = $(this).find('.sale_price').val();
var amount = (qty*price)
sum+=amount;
// console.log(price);
console.log("Sub Total: " + amount);
$('.sub_total').text(''+amount);
});
console.log("Grand Total: " + sum);
//just update the total to sum
$('.grand_total').text(sum);
}
$('table#items tbody').on("change","tr .quantity",function() {
//var qty = $(this).val();
// alert("Change");
update_amounts();
});
<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table class="table table-bordered table-responsive" id="items">
<thead>
<tr style="background-color: #f9f9f9;">
<th width="5%" class="text-center">Actions</th>
<th width="10%" class="text-left">Item</th>
<th width="8%" class="text-left">Unit Price</th>
<th width="11%" class="text-left">Purchase Price</th>
<th width="8%" class="text-left">Tax Rate</th>
<th width="5%" class="text-right">Discount(%)</th>
<th width="10%" class="text-right">Sale Price</th>
<th width="5%" class="text-right">Quantity</th>
<th width="13%" class="text-right">Return Quantity</th>
<th width="10%" class="text-right">Total Price</th>
</tr>
</thead>
<tbody>
<?php $item_row = 0; ?>
<tr class="data_entry" id="item-row-{{ $item_row }}">
<td class="text-center" style="vertical-align: middle;">
<button type="button" onclick="$(\'#item-row-' + item_row + '\').remove();" title="Delete" class="btn btn-xs btn-danger"><i class="fa fa-trash"></i></button>
</td>
<td>
<select class="form-control select2 typeahead" required="required" name="item[{{ $item_row }}][item_id]" id="item-item_id-{{ $item_row }}">
<option>Select</option>
<option value="item1">item1</option>
<option value="item2">item2</option>
<option value="item3">item3</option>
<option value="item4">item4</option>
</select>
<input name="item[{{ $item_row }}][item_id]" type="hidden" id="item-id-{{ $item_row }}">
</td>
<td>
<input class="form-control text-right" required="required" name="item[{{ $item_row }}][unit_price]" type="text" id="item-unit_price-{{ $item_row }}">
</td>
<td>
<input class="form-control text-right" required="required" name="item[{{ $item_row }}][purchase_price]" type="text" id="item-purchase_price-{{ $item_row }}">
</td>
<td>
<input class="form-control text-right" required="required" name="item[{{ $item_row }}][tax_rate]" type="text" id="item-tax_rate-{{ $item_row }}">
</td>
<td>
<input class="form-control text-right" required="required" name="item[{{ $item_row }}][discount_amount]" type="text" id="item-discount_amount-{{ $item_row }}">
</td>
<td>
<input class="form-control text-right sale_price" required="required" name="item[{{ $item_row }}][sale_price]" type="text" id="item-sale_price-{{ $item_row }}">
</td>
<td>
<input class="form-control text-right quantity" required="required" name="item[{{ $item_row }}][quantity]" type="text" id="item-quantity-{{ $item_row }}">
</td>
<td>
<input class="form-control text-right" required="required" name="item[{{ $item_row }}][return_quantity]" type="text" id="item-return_quantity-{{ $item_row }}">
</td>
<td>
<input class="form-control text-right" required="required" name="item[{{ $item_row }}][total_price]" type="text" id="item-total_price-{{ $item_row }}" >
</td>
</tr>
<?php $item_row++; ?>
<tr id="addItem">
<td class="text-center"><button type="button" onclick="addItem();" title="Add" class="btn btn-xs btn-primary" data-original-title="Add"><i class="fa fa-plus"></i></button></td>
</tr>
<tr>
<td colspan="8"></td>
<td class="text-right align-middle"><strong>Sub Total</strong></td>
<td>
<input type="text" name="sub_total" id="sub_total" class="form-control text-right sub_total">
</td>
</tr>
<tr>
<td colspan="8"></td>
<td class="text-right align-middle"><strong>Tax Amount</strong></td>
<td>
<input type="text" name="tax_amount" id="tax_amount" class="form-control text-right">
</td>
</tr>
<tr>
<td colspan="8"></td>
<td class="text-right align-middle"><strong>Discount Amount</strong></td>
<td>
<input type="text" name="discount_amount" id="discount_amount" class="form-control text-right">
</td>
</tr>
<tr>
<td colspan="8"></td>
<td class="text-right align-middle"><strong>Grand Total</strong></td>
<td>
<input type="text" name="grand_total" id="grand_total" class="form-control text-right grand_total">
</td>
</tr>
<tr>
<td colspan="8"></td>
<td class="text-right align-middle"><strong>Cash Received</strong></td>
<td>
<input type="text" name="cash_received" id="cash_received" class="form-control text-right">
</td>
</tr>
<tr>
<td colspan="8"></td>
<td class="text-right align-middle"><strong>Cash Refund</strong></td>
<td>
<input type="text" name="cash_refund" id="cash_refund" class="form-control text-right">
</td>
</tr>
<tr>
<td colspan="8"></td>
<td class="text-right"><a href="" class="btn btn-warning">Clear</a></td>
<td><button type="submit" class="btn btn-primary">Save</button></td>
</tr>
</tbody>
</table>
请尝试以下更改
$('.quantity').change(function() {
update_amounts();
});
$(document).on("change",".quantity",function() {
update_amounts();
});
并在 html
中添加 class "product_row" tr <tr id="item-row-<?php echo $item_row; ?>" class="product_row">
也在 addItem 函数中
html = '<tr id="item-row-' + item_row + '" class="product_row">';
更改每个函数
$('#items > tbody > tr.product_row').each(function() {
var qty = $(this).find('.quantity').val();
var price = $(this).find('.sale_price').val();
var amount = (qty*price)
sum+=amount;
$('.sub_total').val(amount);
});