Question

我正在尝试创建一张发票，该发票按数量和所有总计的总和来计算总价格。

第一部分正在工作，但是第二部分没有工作。

在我的代码中，我有：

<?php foreach ($invoiceItems as $index => $invoiceItem) { ?>
    <tr class="create-invoice-tr-body-items">
        <td style="width: 12%;" class="ly-inv-preview-show-borders-cell">
            <?= $form->field($invoiceItem, '['.$index.']product_code')->textInput(['id'=> 'itemNo_'.$index , 'class' => 'inp-code'])->label(false) ?>
        </td>
        <td style="width: 45%;" class="ly-inv-preview-show-borders-cell">
            <?= $form->field($invoiceItem, '['.$index.']product_name')->textInput(['id'=> 'itemName_'.$index , 'class' => 'inp-name'])->label(false) ?>
        </td>
        <td style="width: 10%;" class="ly-inv-preview-show-borders-cell">
            <?= $form->field($invoiceItem, '['.$index.']product_price')->textInput(['id'=> 'price_'.$index , 'class' => ''])->label(false) ?>
        </td>
        <td style="width: 9%;" class="ly-inv-preview-show-borders-cell">
            <?= $form->field($invoiceItem, '['.$index.']product_unite')->textInput(['id'=> 'unity_'.$index , 'class' => ''])->label(false) ?>
        </td>
        <td style="width: 9%;" class="ly-inv-preview-show-borders-cell">
            <?= $form->field($invoiceItem, '['.$index.']product_qtt')->textInput(['id'=> 'quantity_'.$index , 'class' => ''])->label(false) ?>
        </td>
        <td style="width: 15%;" class="ly-inv-preview-show-borders-cell">
            <?= $form->field($invoiceItem, '['.$index.']product_total')->textInput(['id'=> 'total_'.$index , 'class' => 'inp-prod-total'])->label(false) ?>
        </td>
    </tr>
<?php } ?>

    <?= $form->field($invoice, 'invoice_subtotal')->textInput(['id'=>'inv_subtotal'])->label(false) ?>

我的JavaScript：

<script type="text/javascript">

var i;
for (i = 0; i < <?=$index?>; i++) { 
    $("#quantity_"+i).keyup(function(){
        total = $("#quantity_"+i).val()* $("#price_"+i).val();
        $("#total_"+i).val(total);
    });
}

var sum = 0;
$(".inp-prod-total").each(function(){
    if(!isNaN(this.value) && this.value.length!=0) {
        sum += +parseFloat($(this).val());
    }
});
$("#inv_subtotal").val(sum);

</script>

计算价格x数量的第一部分正在工作。

这部分正在工作：

var i;
for (i = 0; i < <?=$index?>; i++) { 
    $("#quantity_"+i).keyup(function(){
        total = $("#quantity_"+i).val()* $("#price_"+i).val();
        $("#total_"+i).val(total);
    });
}

但是要计算具有id = inv_subtotal的所有总数的第二部分无效。并非所有输入都可以有一个值，有时我只有两个项目，有时我可以有4或6个项目，这取决于。

Answer 1

好的，这是一个概念证明。请注意，这是对字段的汇总。

希望现在一切都清楚了。

<html>

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>JSfiddle</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
    crossorigin="anonymous"></script>
</head>

<body>
  <table>
    <tr class="create-invoice-tr-body-items">
      <td style="width: 12%;" class="ly-inv-preview-show-borders-cell">
        <form>
          <input class="inp-name" type="text" value="20" />
          <input class="inp-name" type="text" value="20" />
          <input class="inp-name" type="text" value="20" />
          <input class="inp-name" type="text" value="20" />
          <input class="inp-name" type="text" value="20" />
        </form>
      </td>
    </tr>
  </table>
  </div>
  <script>
    $(document).ready(function () {
      var sum = 0;
      //perform loop accros all class elems
      $('table tr td .inp-name').each(function (i, obj) {
        //console.log(i, obj);
        // cache varialbe
        let $objVal = $(obj).val();
        if ($objVal !== NaN && typeof $objVal !== "undefined") {
          sum += parseFloat($objVal);
        }
      });
      console.log(sum);
    });
  </script>
</body>

</html>

jQuery：发票中所有输入字段的总和

1 个答案: