使用javascript附加行后如何自動計算每個表行的總價？

Question

請在 laravel 中創建一個 POS 應用程序，並希望在我附加表格行時自動計算每行的總價格。 我需要幫助。 謝謝

我的代碼如下

<table class="table table-head-fixed text-nowrap" id="myTable">
                  <thead>
                    <tr>
                      <th>Qty</th>
                      <th>Item</th>
                      <th>Description</th>
                      <th>Unit Price</th>
                      <th>Tax</th>
                      <th>Total</th>
                      <th></th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr class="main_data">
                      <td><input type="number" name="items[0][inv_quantity]" class="form-control quantity" onkeyup="cal()" id="qty_invoice" style="width: 70px"></td>
                      <td>
                        <select name="items[0][inv_item]" class="form-control item" style="width: 250px">
                          <option>Items</option>
                        </select>
                      </td>
                      <td><input type="text" name="items[0][inv_desc]" class="form-control description" style="width: 400px"></td>
                      <td><span class="tag tag-success"><input type="text" name="items[0][inv_price]" class="form-control u_price" onkeyup="cal()" id="price_invoice" style="width: 150px"></span></td>
                      <td><span class="tag tag-success"><input type="text" name="items[0][inv_tax]" class="form-control tax" style="width: 150px"></td>
                      <td><span class="tag tag-success"><input type="text" name="items[0][inv_total]" id="total" class="form-control amount" style="width: 150px"></td>
                      <td>
                        <span><button class="btn btn-default" type="button" onclick="remove()"><i class="fa fa-trash" aria-hidden="true"></i></button></span>
                        <span><button type="button" onclick="myFunction()" class="btn btn-default"><i class="fa fa-plus" aria-hidden="true"></i> Add Row</button></span>
                      </td>

                    </tr>

                    
                  </tbody>
                </table>

腳本

   <script type="text/javascript">
          var int = 1;
          function myFunction() {
            var tr = '<tr>'+
             '<td class="table_field main_data"><input type="number" name="items['+ (int) +'][inv_quantity]" class="form-control quantity"  style="width: 70px"></td>'+ '<td><select name="items['+ (int) +'][inv_item]" class="form-control item" style="width: 250px"><option>Items</option></select></td>'+'<td><input type="text" name="items['+ (int) +'][inv_desc]" class="form-control description" style="width: 400px"></td>'+'<td><span class="tag tag-success"><input type="text" name="items['+ (int) +'][inv_price]" class="form-control u_price" style="width: 150px"></span></td>'+'<td><span class="tag tag-success"><input type="text" name="items['+ (int) +'][inv_tax]" class="form-control tax" style="width: 150px"></td>'+'<td><span class="tag tag-success"><input type="text" name="items['+ (int) +'][inv_total]" class="form-control amount" style="width: 150px"></td>'+'<td><span><button class="btn btn-default" type="button" onclick="remove()"><i class="fa fa-trash" aria-hidden="true"></i></button></span><span><button type="button" onclick="myFunction()" class="btn btn-default"><i class="fa fa-plus" aria-hidden="true"></i> Add Row</button></span</td>'
             '</tr>';
             $('tbody').append(tr);
             int++;
          }



          function cal(){

              var qty= document.getElementById('qty_invoice').value;
              var unit = document.getElementById('price_invoice').value;
              var total = parseInt(qty*unit);
              document.getElementById('total').value = total;
              console.log(total);
          }
          
        </script>

我只能自動計算第一行，在附加行后對其余行不起作用。 任何幫助請

Answer 1

您可以使用watch屬性； 將您響應中的rows保存rows類的變量中並將其放入監視中，以便每次添加新行時您都可以計算它。

例如：

data() {
    return {
        rows:[]
    }
},
watch: {
    rows(val) {
        console.log("new row", val)
        this.cal
    }
}