Question

我有一个脚本，其中“余额金额”应等于“总金额-已付金额”。当我尝试输入支付金额时，余额未显示剩余金额。我希望当我在付费输入中输入金额时，应减少余额并显示总计-支付金额。

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>

Answer 1

尝试此代码

使用$('#paid').on('change', function())}获取balance1 value from总计and已支付amount when已支付amout change的余额余额视图

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>

余额应等于php脚本中的总计-支付金额

1 个答案: