如何使用jquery計算多個輸入的發票總金額？

order_items我使用回圈從表中檢索所有專案foreach，然后我想修改每個專案的數量和價格。

我想要的是使用 jQuery 立即計算所有專案的數量subtotal和total數量，但我找不到讓它作業的方法。

$(".price").on('change', function() {
  var subtotal = 0;
  var total = 0;
  var total_ht = $("#total_ht").val();
  var price = $(this).val();
  var id = $(this).attr('data-id');
  var quantity = $("#quantity-"   id).val();

  subtotal = price * quantity;
  total = subtotal   (subtotal * 20 / 100)
  // Single row subtotal
  $("#subtotal-"   id).val(subtotal);
  // Single row total
  $("#total-"   id).val(total);
  // All  rows subtotal
  total_ht = parseFloat(total_ht   subtotal);
  $("#total_ht").val(total_ht);
})


$(".quantity").on('change', function() {
  var subtotal = 0;
  var total = 0;
  var total_ht = $("#total_ht").val();
  var quantity = $(this).val();
  var id = $(this).attr('data-id');
  var price = $("#price-"   id).val();

  subtotal = price * quantity;
  total = subtotal   (subtotal * 20 / 100);
  // Single row subtotal   
  $("#subtotal-"   id).val(subtotal);
  // Single row total
  $("#total-"   id).val(total);
  // All  rows subtotal
  $("#total_ht").val(total_ht);
})

<table>
      <tbody>
        <?php foreach($orderItems as $item): ?>
          <tr>
            <td>
              <input type="number" name="quantity[]"  value="<?= $item->quantity ?>" data-id="<?= $item->id ?>" id="quantity-<?= $item->id ?>">
            </td>
            <td>
              <input type="number" name="price[]"  data-id="<?= $item->id ?>" value="<?= $item->unity_price ?>" id="price-<?= $item->id ?>">
            </td>

            <td>
              <input type="number" name="subtotal[]"  data-id="<?= $item->id ?>" value="<?= $item->total_ht_price ?>" id="subtotal-<?= $item->id ?>" readonly>
            </td>

            <td>
              <input type="number" name="total[]"  data-id="<?= $item->id ?>" value="<?= $item->total_ttc_price ?>" id="total-<?= $item->id ?>" readonly>
            </td>
          </tr>
        <?php endforeach; ?>
      </tbody>
    </table>

    <table >
    <tbody>
        <tr>
            <th >Total HT
            </th>
            <td >
                <input type="number" name="total_ht" id="total_ht"  readonly value="0">
            </td>
        </tr>
        <tr>
            <th >TVA
            </th>
            <td >
                <input type="number" name="totalTVA" id="totalTVA"  readonly value="20">
            </td>
        </tr>
        <tr>
            <th >Total TTC
            </th>
            <td >
                <input type="number" name="totalTTC" id="totalTTC"  readonly value="0">
            </td>
        </tr>
        
    </tbody>
    </table>

uj5u.com熱心網友回復：

這是一個委托版本

我使用輸入事件，因為它也觸發粘貼

$("table tbody tr input").on('input', function() {
  let total = 0;
  $("table tbody tr").each(function() {
    const price =  $(this).find(".price").val()
    const qty =  $(this).find(".quantity").val()
    const val = price*qty
    total  = val;
    $(this).find(".subtotal").val(val)
    $(this).find(".total").val(total)
    
  })
  $("#total_ht").val(total)
}).trigger("input")

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody>

      <tr>
        <td>
          <input type="number" name="quantity[]" class="quantity" value="2" data-id="id1" id="quantity-1">
        </td>
        <td>
          <input type="number" name="price[]" class="form-control price" data-id="id2" value="3" id="price-1">
        </td>

        <td>
          <input type="number" name="subtotal[]" class="subtotal" data-id="id3" value="" id="subtotal-1" readonly>
        </td>

        <td>
          <input type="number" name="total[]" class="total" data-id="id4" value="" id="total-1" readonly>
        </td>
      </tr>

      <tr>
        <td>
          <input type="number" name="quantity[]" class="quantity" value="2" data-id="id5" id="quantity-2">
        </td>
        <td>
          <input type="number" name="price[]" class="form-control price" data-id="id6>" value="3" id="price-2">
        </td>

        <td>
          <input type="number" name="subtotal[]" class="subtotal" data-id="id7" value="" id="subtotal-2" readonly>
        </td>

        <td>
          <input type="number" name="total[]" class="total" data-id="id9" value="" id="total-2" readonly>
        </td>
      </tr>

  </tbody>
</table>
<input type="number" id="total_ht" readonly />

標籤：jQuery 发票

上一篇：當我使用鍵功能洗掉只讀時，它會自動在文本框中添加字符

下一篇：獲取按鈕單擊值以保存到SQLServer表中