javascript - 如何在动态表中计算折扣、税(增值税)、小计和总计

Question

我刚开始使用 jQuery，所以我还是个新手。有人可以帮我计算动态表中的新价格吗？我有一个包含 3 列的动态表，数量、折扣和价格。用户在当前价格、小计和总计所在的同一文本框中输入折扣 (%) 后，我需要重新计算新价格。

这是我的表格:

            <table class="table">
                <thead><tr><th style="width:60%">Description</th><th class="centrer" style="width:10%">Qty</th><th class="centrer" style="width:10%">Discount</th><th class="centrer" style="width:20%">Price</th></tr></thead>
                <tbody>
                <?php
                if(isset($listeArticlePourUnDossier) && count($listeArticlePourUnDossier) > 0)
                {
                    $sousTotal = 0;
                    $symbol = '';
                    $VAT = 0;
                    $TTC = 0;
                    $iArticles = 0;
                    while($iArticles < count($listeArticlePourUnDossier))
                    {
                        $ARTICLE_CURRENCY = $listeArticlePourUnDossier[$iArticles]['ARTICLE_CURRENCY'];
                        $sousTotal = $sousTotal + ($listeArticlePourUnDossier[$iArticles]['ARTICLE_PRIX']); 
                ?>  
                        <tr>
                            <td><?php echo ($listeArticlePourUnDossier[$iArticles]['ARTICLE_NOM']); ?></td>
                            <td class="centrer">1</td>
                            <td class="centrer"><input type="text" name="txtdiscount" id="txtdiscount_<?php echo $iArticles; ?>" onkeyup="calc()"/></td>
                            <td class="centrer"><input type="text" name="txtPrice" id="txtPrice_<?php echo $iArticles; ?>" readonly value="<?php echo (number_format($listeArticlePourUnDossier[$iArticles]['ARTICLE_PRIX'],2)); ?>"/></td>
                        </tr>
                <?php       
                    $iArticles++;
                    }
                ?>      
                    <tr>
                        <td class="nocolor"></td>
                        <td></td>
                        <td class="centrer bold">Subtotal</td>
                        <td class="centrer bold"><?php echo (number_format($sousTotal,2)); ?></td>
                    </tr>
                    <tr>
                        <td class="nocolor"></td>
                        <td></td>
                        <td class="centrer bold">VAT</td>
                        <td class="centrer"><?phpecho (number_format($VAT,2)); ?></td>
                    </tr>
                    <tr>
                        <td class="nocolor"></td>
                        <td></td>
                        <td class="centrer bold">G.Total</td>
                        <td class="centrer bold">
                            <?php
                                $TTC = $sousTotal - $VAT;
                                echo (number_format($TTC,2)); 
                            ?>
                        </td>
                    </tr>
                <?php
                }   
                ?>  
                </tbody>
            </table>

如何在用户输入折扣后立即在当前价格文本框中填写新价格，比如 10%？

感谢您的协助。

Answer 1

你可以这样在价格栏填写折扣金额，请查看下面的代码，希望对你有帮助，

在这里，更新了你正在使用的 td 和 js 代码。

谢谢。

    <td class="centrer">
                <input type="text" name="txtdiscount" value ="" id="txtdiscount_<?php echo $iArticles; ?>" onkeyup="calc(this.value,'<?php echo $iArticles; ?>')"
                />
              </td>
              <td class="centrer">
                <input type="text" name="txtPrice" id="txtPrice_<?php echo $iArticles; ?>" readonly value="<?php echo (number_format($data['price'],2)); ?>" />
                <input type="hidden" name="hidden_txtPrice" id="hidden_txtPrice_<?php echo $iArticles; ?>" readonly value="<?php echo (number_format($data['price'],2)); ?>" />
              </td>


<tr>
        <td class="nocolor"></td>
        <td></td>
        <td class="centrer bold">VAT</td>
        <td class="centrer">
          <select name="vatDropdown" id="vatDropdown">
            <option value="-1">Select VAT</option>
            <option value="1">Yes</option>
            <option value="2">No</option>
          </select>
        </td>
      </tr>
      <tr>
        <td class="nocolor"></td>
        <td></td>
        <td class="centrer bold">G.Total</td>
        <td class="centrer bold" id="grandtotal">
          <?php  echo (number_format($TTC,2)); ?>          
        </td>
        <input type="hidden" name="hidden_total" id="hidden_total" value="<?php echo (number_format($TTC,2)); ?>" />
      </tr>

        <script>
          function calc(discount, article_id)
          {
            var price = 0;
            var dis_amt = 0;
            var calculatedAmt = 0;
            var discount_amt = 0;
            price = $("#hidden_txtPrice_"+article_id).val();
            if(discount != '')
            {      
              dis_amt = parseFloat(discount) / 100;
              calculatedAmt = parseFloat(price) * parseFloat(dis_amt);
              discount_amt = parseFloat(price) - parseFloat(calculatedAmt);
              $("#txtPrice_"+article_id).val(discount_amt);
            }
            else
            {
              $("#txtPrice_"+article_id).val(price);
            }    
          }

$("#vatDropdown").on('change', function(){
    var dropdown_val = $(this).val();
    var grandtotal = $("#hidden_total").val();
    if(dropdown_val == '1')
    {
      var vat_dis = 15 / 100;
      var vat_amt = parseFloat(grandtotal) * parseFloat(vat_dis);
      var gTotal = parseFloat(grandtotal) + parseFloat(vat_amt);
      $("#grandtotal").html(gTotal.toFixed(2));

    }
    else
    {
      $("#grandtotal").text(grandtotal);
    }    
  });

        </script>