我有一个脚本，其中余额金额应等于总金额 - 已付款金额。当我尝试输入已付款金额时，余额不显示剩余金额。我希望当我在付费输入中输入金额时，余额应该减少并显示总支付金额。
const table = document.getElementById('myTable');
table.addEventListener('input', ({
target
}) => {
const tr = target.closest('tr');
const [price, quantity, total] = tr.querySelectorAll('input');
var rate = price.value * quantity.value;
if (rate != "") {
total.value = rate;
}
totalPrice();
});
function totalPrice() {
var grandtotal = 0;
var paid = 0;
var balance = 0;
$(".totalPrice").each(function() {
grandtotal += parseFloat($(this).val());
paid = grandtotal;
balance = grandtotal - paid;
});
$("#grandtotal").val(grandtotal);
$("#paid").val(paid);
$("#balance").val(balance);
}table,
tr,
td,
th {
border: 1px black solid;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<th>Rate</th>
<th>Quantity</th>
<th>Total</th>
</thead>
<tbody id="myTable">
<tr>
<td><input type="text" name="price" value="0"></td>
<td><input type="text" name="quantity" value="1"></td>
<td><input type="text" name="total" class="totalPrice" readonly></td>
</tr>
</tbody>
</table>
<span>Grand Total<input type="text" name="grandtotal" id="grandtotal" readonly></span><br><br>
<span>Paid Amount<input type="text" name="paid" id="paid"></span><br><br>
<span>Balance<input type="text" name="balance" id="balance" readonly></span><br><br>最佳答案
试试这个代码
使用$('#paid').on('change', function())}从grandtotal和获取balance1值>已付款付款时金额已付款金额变更余额查看`
const table = document.getElementById('myTable');
table.addEventListener('input', ({
target
}) => {
const tr = target.closest('tr');
const [price, quantity, total] = tr.querySelectorAll('input');
var rate = price.value * quantity.value;
if (rate != "") {
total.value = rate;
}
totalPrice();
});
function totalPrice() {
var grandtotal = 0;
var paid = 0;
var balance = 0;
$(".totalPrice").each(function() {
grandtotal += parseFloat($(this).val());
paid = grandtotal;
balance = parseFloat(grandtotal) - parseFloat(paid);
});
$("#grandtotal").val(grandtotal);
$("#paid").val(paid);
}
$(document).ready(function() {
$('#paid').on('change', function() {
grandtotal = $("#grandtotal").val();
paid = $("#paid").val();
balance = parseFloat(grandtotal) - parseFloat(paid);
$("#balance").val(balance);
})
});table,
tr,
td,
th {
border: 1px black solid;
}<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table>
<thead>
<th>Rate</th>
<th>Quantity</th>
<th>Total</th>
</thead>
<tbody id="myTable">
<tr>
<td><input type="text" name="price" value="0"></td>
<td><input type="text" name="quantity" value="1"></td>
<td><input type="text" name="total" class="totalPrice" readonly></td>
</tr>
</tbody>
</table>
<span>Grand Total<input type="text" name="grandtotal" id="grandtotal" readonly></span><br><br>
<span>Paid Amount<input type="text" name="paid" id="paid"></span><br><br>
<span>Balance<input type="text" name="balance" id="balance" readonly></span><br><br>
</body>
<script>
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
</style>
</html>关于jquery - 余额应等于 php 脚本中的总计 - 已付款金额，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53081455/