如何使用jQuery在发票中实现折扣值

Posted

技术标签:

【中文标题】如何使用jQuery在发票中实现折扣值【英文标题】：how to implement discount value in invoice using jQuery 【发布时间】：2020-12-09 03:43:29 【问题描述】：

我正在尝试在我的表单中实现折扣值。

我在 jQuery 代码中试过这个

$('tbody').delegate('.quantity,.price,.gst,.dsc', 'keyup', function() 
  var tr = $(this).parent().parent();
  var quantity = tr.find('.quantity').val();
  var price = tr.find('.price').val();
  var gst = tr.find('.gst').val();
  var dcs = tr.find('.dcs').val();
  var totalamountgst = (quantity * price * gst) / 100;
  var totalamountdcs = (quantity * price * dcs) / 100;
  var totalamounts = (quantity * price + totalamountgst);
  var totalamount = (totalamounts - totalamountdcs);


  tr.find('.totalamount').val(totalamount);
  total();
);

function total() 
  var total = 0;
  $('.totalamount').each(function(i, e) 
    var totalamount = $(this).val() - 0;
    total += totalamount;
  );
  $('.total').val(total + ".00");
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td> <input style="text-align:center;" type="text" class="text-danger  input-lg form-control quantity" name="qty[]" id="validationServer01" placeholder="QTY" value="" required pattern="[1-2-3-4-3-5-6-7-8-9-10-12]+" numbers="onlynumbers" autocomplete="off"></td>
      <td> <input style="text-align:center;" type="text" class="text-danger  input-lg form-control gst " name="gst_amount[]" id="validationServer01" placeholder="GST" value="" required pattern="[1-2-3-4-3-5-6-7-8-9-10-12]+" numbers="onlynumbers" autocomplete="off"></td>
      <td> <input style="text-align:center;" type="text" class="text-danger  input-lg form-control dcs " name="dcs_amount[]" id="validationServer01" placeholder="DCS" value="" required pattern="[1-2-3-4-3-5-6-7-8-9-10-12]+" numbers="onlynumbers" autocomplete="off"></td>
      <td> <input style="text-align:center;" type="number" class="text-danger  input-lg form-control price" name="purchase_rate[]" id="validationServer01" placeholder="RATE" value="" required pattern="" numbers="" autocomplete="off"></td>
      <td> <input style="text-align:center;" type="text" class="text-danger  input-lg form-control totalamount" name="" id="validationServer01" placeholder="AMOUNT" value="" required pattern="[1-2-3-4-3-5-6-7-8-9-10-12]+" numbers="onlynumbers" disabled></td>
    </tr>
  </tbody>
</table>

【问题讨论】：

@mplungjan 输出结果显示错误。 “108” |数量 gst(tax) discount(dcs) 费率金额 | | 1 18% 10% 100 108 |正确结果“106” |数量 gst(tax) discount(dcs) 费率金额 | | 1 18% 10% 100 106 |解决这个问题 我不明白你的意思。请查看您编写的计算 - 我只是复制结果并求和 - 请在所有字段中显示输入和预期输出 【参考方案1】：

你有错别字，错过了总数。

当 ppl 输入非数字或将它们全部设为 type=number 时，您确实也应该测试 empty 和 isNaN

$('tbody').on('input', '.quantity,.price,.gst,.dsc', function() 
  const $tr = $(this).closest("tr"); // parent row
  const quantity = $tr.find('.quantity').val() || 0; // value of input fields
  const price = $tr.find('.price').val() || 0;
  const gst = $tr.find('.gst').val() || 0;
  
  const $dcsField = $tr.find('.dcs'); // the field is cached so we can reuse
  const dcs = $dcsField.val(); // here is the value

  const totalamountgst = (quantity * price * gst) / 100;
  const totalamountdcs = (quantity * price * dcs) / 100;
  const totalamounts = (quantity * price + totalamountgst);
  const totalamount = (totalamounts - totalamountdcs);
  
  $dcsField.data("dcsamt",totalamountdcs || 0); // save the discounted value in a data attribute to be summed

  $tr.find('.totalamount').val(totalamount.toFixed(2));
  total();
);

function total() 
  let total = 0,
    totalQty = 0,
    totalDcs = 0;
  $('.totalamount').each(function(i, e) 
    const totalamount = $(this).val() - 0;
    total += totalamount;
    const q = $(this).closest("tr").find(".quantity").val() || 0;
    const d = $(this).closest("tr").find(".dcs").data("dcsamt") || 0;
    totalQty += q - 0;
    totalDcs += d - 0; // take the actual discount from the attribute
  );
  $('#total').val(total.toFixed(2));
  $('#totalitems').val(totalQty.toFixed(2));
  $('#totaldcs').val(totalDcs.toFixed(2));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td> <input style="text-align:center;" type="text" class="text-danger  input-lg form-control quantity" name="qty[]" id="validationServer01" placeholder="QTY" value="" required pattern="[1-2-3-4-3-5-6-7-8-9-10-12]+" numbers="onlynumbers" autocomplete="off"></td>
      <td> <input style="text-align:center;" type="text" class="text-danger  input-lg form-control gst " name="gst_amount[]" id="validationServer01" placeholder="GST" value="" required pattern="[1-2-3-4-3-5-6-7-8-9-10-12]+" numbers="onlynumbers" autocomplete="off"></td>
      <td> <input style="text-align:center;" type="text" class="text-danger  input-lg form-control dcs " name="dcs_amount[]" id="validationServer01" placeholder="DCS" value="" required pattern="[1-2-3-4-3-5-6-7-8-9-10-12]+" numbers="onlynumbers" autocomplete="off"></td>
      <td> <input style="text-align:center;" type="number" class="text-danger  input-lg form-control price" name="purchase_rate[]" id="validationServer01" placeholder="RATE" value="" required pattern="" numbers="" autocomplete="off"></td>
      <td> <input style="text-align:center;" type="text" class="text-danger  input-lg form-control totalamount" name="" id="validationServer01" placeholder="AMOUNT" value="" required pattern="[1-2-3-4-3-5-6-7-8-9-10-12]+" numbers="onlynumbers" disabled></td>
    </tr>
    <tr>
      <td> <input style="text-align:center;" type="text" class="text-danger  input-lg form-control quantity" name="qty[]" id="validationServer01" placeholder="QTY" value="" required pattern="[1-2-3-4-3-5-6-7-8-9-10-12]+" numbers="onlynumbers" autocomplete="off"></td>
      <td> <input style="text-align:center;" type="text" class="text-danger  input-lg form-control gst " name="gst_amount[]" id="validationServer01" placeholder="GST" value="" required pattern="[1-2-3-4-3-5-6-7-8-9-10-12]+" numbers="onlynumbers" autocomplete="off"></td>
      <td> <input style="text-align:center;" type="text" class="text-danger  input-lg form-control dcs " name="dcs_amount[]" id="validationServer01" placeholder="DCS" value="" required pattern="[1-2-3-4-3-5-6-7-8-9-10-12]+" numbers="onlynumbers" autocomplete="off"></td>
      <td> <input style="text-align:center;" type="number" class="text-danger  input-lg form-control price" name="purchase_rate[]" id="validationServer01" placeholder="RATE" value="" required pattern="" numbers="" autocomplete="off"></td>
      <td> <input style="text-align:center;" type="text" class="text-danger  input-lg form-control totalamount" name="" id="validationServer01" placeholder="AMOUNT" value="" required pattern="[1-2-3-4-3-5-6-7-8-9-10-12]+" numbers="onlynumbers" disabled></td>
    </tr>
    <tr>
      <td> <input style="text-align:center;" type="text" class="text-danger  input-lg form-control quantity" name="qty[]" id="validationServer01" placeholder="QTY" value="" required pattern="[1-2-3-4-3-5-6-7-8-9-10-12]+" numbers="onlynumbers" autocomplete="off"></td>
      <td> <input style="text-align:center;" type="text" class="text-danger  input-lg form-control gst " name="gst_amount[]" id="validationServer01" placeholder="GST" value="" required pattern="[1-2-3-4-3-5-6-7-8-9-10-12]+" numbers="onlynumbers" autocomplete="off"></td>
      <td> <input style="text-align:center;" type="text" class="text-danger  input-lg form-control dcs " name="dcs_amount[]" id="validationServer01" placeholder="DCS" value="" required pattern="[1-2-3-4-3-5-6-7-8-9-10-12]+" numbers="onlynumbers" autocomplete="off"></td>
      <td> <input style="text-align:center;" type="number" class="text-danger  input-lg form-control price" name="purchase_rate[]" id="validationServer01" placeholder="RATE" value="" required pattern="" numbers="" autocomplete="off"></td>
      <td> <input style="text-align:center;" type="text" class="text-danger  input-lg form-control totalamount" name="" id="validationServer01" placeholder="AMOUNT" value="" required pattern="[1-2-3-4-3-5-6-7-8-9-10-12]+" numbers="onlynumbers" disabled></td>
    </tr>
    <tr>
      <td> <input type="text" class="text-danger input-lg form-control" id="totalitems" name="" placeholder="TOTAL ITEMS" value=""></td>
      <td></td>
      <td> <input type="text" class="input-lg form-control" id="totaldcs" name="" placeholder="TOTAL DCS" value=""></td>
      <td></td>
      <td><input type="text" readonly id="total"></td>
    </tr>
  </tbody>
</table>

【讨论】：

是否可以显示整个折扣金额以及填充的总行数，例如显示总金额 你能发布答案吗？我花了 3 个小时才得到错误，请帮忙 我不明白 我想显示总 dcs 金额和总归档行 ' ' ' ' 我最后的希望是请你帮忙，我会再解释一次，

以上是关于如何使用jQuery在发票中实现折扣值的主要内容，如果未能解决你的问题，请参考以下文章

如何在 jQuery 中实现任意文本节点选择

如何在布局页面中实现通用的jquery数据表

发票数据库设计

如何在zepto中实现类似slideDown()的jquery

如何在 jquery 中实现 MVC [关闭]

如何在 Jquery UI 对话框中实现“确认”对话框？