小贝子编程

使用jQuery不起作用的附加行计算



我正在尝试在附加行值中计算。但是，计算脚本不起作用。JQuery-Slim和JQuery之间是否有任何冲突？我正在为该项目使用Bootstrap 4和Laravel框架。我尝试了各种jQuery脚本进行此计算。但是，没有任何工作。有人会帮助我完成计算。

var item_row = '{{ $item_row }}';
function addItem() {
  html = '<tr id="item-row-' + item_row + '">';
  html += '<td class="text-center" style="vertical-align: middle;">';
  html += '<button type="button" onclick="$('#item-row-' + item_row + '').remove()" title="Delete" class="btn btn-xs btn-danger"><i class="fa fa-trash"></i></button>';
  html += '</td>';
  html += '<td>';
  html += '<select class="form-control select2" name="item[' + item_row + '][item_id]" id="item-item_id-' + item_row + '">';
  html += '<option selected="selected" value="">Select</option>';
  html += '<option value="item1">item1</option>';
  html += '<option value="item2">item2</option>';
  html += '<option value="item3">item3</option>';
  html += '<option value="item4">item4</option>';
  html += '<input name="item[' + item_row + '][item_id]" type="hidden" id="item-id-' + item_row + '">';
  html += '</td>';
  html += '<td>';
  html += '<input class="form-control text-right" required="required" name="item[' + item_row + '][unit_price]" type="text" id="item-unit_price-' + item_row + '">';
  html += '</td>';
  html += '<td>';
  html += '<input class="form-control text-right" required="required" name="item[' + item_row + '][purchase_price]" type="text" id="item-purchase_price-' + item_row + '">';
  html += '</td>';
  html += '<td>';
  html += '<input class="form-control text-right" required="required" name="item[' + item_row + '][tax_rate]" type="text" id="item-tax_rate-' + item_row + '">';
  html += '</td>';
  html += '<td>';
  html += '<input class="form-control text-right" required="required" name="item[' + item_row + '][discount_amount]" type="text" id="item-discount_amount-' + item_row + '">';
  html += '  </td>';
  html += '<td>';
  html += '<input class="form-control text-right" required="required" name="item[' + item_row + '][sale_price]" type="text" id="item-sale_price-' + item_row + '">';
  html += '</td>';
  html += '<td>';
  html += '<input class="form-control text-right" required="required" name="item[' + item_row + '][quantity]" type="text" id="item-quantity-' + item_row + '">';
  html += '</td>';
  html += '<td>';
  html += '<input class="form-control text-right" required="required" name="item[' + item_row + '][return_quantity]" type="text" id="item-return_quantity-' + item_row + '">';
  html += '</td>';
  html += '<td>';
  html += '<input class="form-control text-right"   required="required" name="item[' + item_row + '][total_price]" type="text" id="item-total_price-' + item_row + '">';
  html += '</td>';
  html += '</tr>';
  $('#items tbody #addItem').before(html);
  item_row++;
}
function update_amounts() {
  var sum = 0.0;
  $('#items > tbody  > tr').each(function() {
    var qty = $(this).find('.quantity').val();
    var price = $(this).find('.sale_price').val();
    var amount = (qty * price)
    sum += amount;
    $(this).find('.sub_total').text('' + amount);
  });
  //just update the total to sum  
  $('.grand_total').text(sum);
}
$('.quantity').change(function() {
  update_amounts();
});
<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table class="table table-bordered table-responsive" id="items">
  <thead>
    <tr style="background-color: #f9f9f9;">
      <th width="5%" class="text-center">Actions</th>
      <th width="10%" class="text-left">Item</th>
      <th width="8%" class="text-left">Unit Price</th>
      <th width="11%" class="text-left">Purchase Price</th>
      <th width="8%" class="text-left">Tax Rate</th>
      <th width="5%" class="text-right">Discount(%)</th>
      <th width="10%" class="text-right">Sale Price</th>
      <th width="5%" class="text-right">Quantity</th>
      <th width="13%" class="text-right">Return Quantity</th>
      <th width="10%" class="text-right">Total Price</th>
    </tr>
  </thead>
  <tbody>
    <?php $item_row = 0; ?>
    <tr id="item-row-{{ $item_row }}">
      <td class="text-center" style="vertical-align: middle;">
        <button type="button" onclick="$('#item-row-' + item_row + '').remove();" title="Delete" class="btn btn-xs btn-danger"><i class="fa fa-trash"></i></button>
      </td>
      <td>
        <select class="form-control select2 typeahead" required="required" name="item[{{ $item_row }}][item_id]" id="item-item_id-{{ $item_row }}">
          <option>Select</option>
          <option value="item1">item1</option>
          <option value="item2">item2</option>
          <option value="item3">item3</option>
          <option value="item4">item4</option>
        </select>
        <input name="item[{{ $item_row }}][item_id]" type="hidden" id="item-id-{{ $item_row }}">
      </td>
      <td>
        <input class="form-control text-right" required="required" name="item[{{ $item_row }}][unit_price]" type="text" id="item-unit_price-{{ $item_row }}">
      </td>
      <td>
        <input class="form-control text-right" required="required" name="item[{{ $item_row }}][purchase_price]" type="text" id="item-purchase_price-{{ $item_row }}">
      </td>
      <td>
        <input class="form-control text-right" required="required" name="item[{{ $item_row }}][tax_rate]" type="text" id="item-tax_rate-{{ $item_row }}">
      </td>
      <td>
        <input class="form-control text-right" required="required" name="item[{{ $item_row }}][discount_amount]" type="text" id="item-discount_amount-{{ $item_row }}">
      </td>
      <td>
        <input class="form-control text-right sale_price" required="required" name="item[{{ $item_row }}][sale_price]" type="text" id="item-sale_price-{{ $item_row }}">
      </td>
      <td>
        <input class="form-control text-right quantity" required="required" name="item[{{ $item_row }}][quantity]" type="text" id="item-quantity-{{ $item_row }}">
      </td>
      <td>
        <input class="form-control text-right" required="required" name="item[{{ $item_row }}][return_quantity]" type="text" id="item-return_quantity-{{ $item_row }}">
      </td>
      <td>
        <input class="form-control text-right" required="required" name="item[{{ $item_row }}][total_price]" type="text" id="item-total_price-{{ $item_row }}">
      </td>
    </tr>
    <?php $item_row++; ?>
    <tr id="addItem">
      <td class="text-center"><button type="button" onclick="addItem();" title="Add" class="btn btn-xs btn-primary" data-original-title="Add"><i class="fa fa-plus"></i></button></td>
    </tr>
    <tr>
      <td colspan="8"></td>
      <td class="text-right align-middle"><strong>Sub Total</strong></td>
      <td>
        <input type="text" name="sub_total" id="sub_total" class="form-control text-right sub_total">
      </td>
    </tr>
    <tr>
      <td colspan="8"></td>
      <td class="text-right align-middle"><strong>Tax Amount</strong></td>
      <td>
        <input type="text" name="tax_amount" id="tax_amount" class="form-control text-right">
      </td>
    </tr>
    <tr>
      <td colspan="8"></td>
      <td class="text-right align-middle"><strong>Discount Amount</strong></td>
      <td>
        <input type="text" name="discount_amount" id="discount_amount" class="form-control text-right">
      </td>
    </tr>
    <tr>
      <td colspan="8"></td>
      <td class="text-right align-middle"><strong>Grand Total</strong></td>
      <td>
        <input type="text" name="grand_total" id="grand_total" class="form-control text-right grand_total">
      </td>
    </tr>
    <tr>
      <td colspan="8"></td>
      <td class="text-right align-middle"><strong>Cash Received</strong></td>
      <td>
        <input type="text" name="cash_received" id="cash_received" class="form-control text-right">
      </td>
    </tr>
    <tr>
      <td colspan="8"></td>
      <td class="text-right align-middle"><strong>Cash Refund</strong></td>
      <td>
        <input type="text" name="cash_refund" id="cash_refund" class="form-control text-right">
      </td>
    </tr>
    <tr>
      <td colspan="8"></td>
      <td class="text-right"><a href="" class="btn btn-warning">Clear</a></td>
      <td><button type="submit" class="btn btn-primary">Save</button></td>
    </tr>
  </tbody>
</table>

，尽管您的问题有些不清楚和不完整，但我设法找出了引起错误的事物，这是

$('#items > tbody  > tr').each(function() {
});

上面，包括tbody中的所有tr，含义包括：

的行

sub总数，税额，折扣金额，总计，现金收到＆amp;现金退款。

没有数量的 input so，这会导致未定义的错误，当您记录控制台中的qty变量时，可以看到。我已经对给定错误更正了您的摘要，只需记录计算（您可以自己添加输入值中的那些），该将其附加在我的答案中以供参考。

建议：如果用户首先填写数量或以其他方式处理此例外，则应为更改价格附加类似的功能。

var item_row = '{{ $item_row }}';
  function addItem(){
    html  = '<tr class="data_entry" id="item-row-' + item_row + '">';
    html += '<td class="text-center" style="vertical-align: middle;">';
    html += '<button type="button" onclick="$('#item-row-' + item_row + '').remove()" title="Delete" class="btn btn-xs btn-danger"><i class="fa fa-trash"></i></button>';
    html += '</td>';
    html += '<td>';
    html += '<select class="form-control select2" name="item[' + item_row + '][item_id]" id="item-item_id-' + item_row + '">';
    html += '<option selected="selected" value="">Select</option>';
    html += '<option value="item1">item1</option>';
    html += '<option value="item2">item2</option>';
    html += '<option value="item3">item3</option>';
    html += '<option value="item4">item4</option>';
    html += '<input name="item[' + item_row + '][item_id]" type="hidden" id="item-id-' + item_row + '">';
    html += '</td>';
    html += '<td>';
    html += '<input class="form-control text-right" required="required" name="item[' + item_row + '][unit_price]" type="text" id="item-unit_price-' + item_row + '">';
    html += '</td>';
    html += '<td>';
    html += '<input class="form-control text-right" required="required" name="item[' + item_row + '][purchase_price]" type="text" id="item-purchase_price-' + item_row + '">';
    html += '</td>';
    html += '<td>';
    html += '<input class="form-control text-right" required="required" name="item[' + item_row + '][tax_rate]" type="text" id="item-tax_rate-' + item_row + '">';
    html += '</td>';
    html += '<td>';
    html += '<input class="form-control text-right" required="required" name="item[' + item_row + '][discount_amount]" type="text" id="item-discount_amount-' + item_row + '">';
    html += '  </td>';
    html += '<td>';
    html += '<input class="form-control text-right sale_price" required="required" name="item[' + item_row + '][sale_price]" type="text" id="item-sale_price-' + item_row + '">';
    html += '</td>';
    html += '<td>';
    html += '<input class="form-control text-right quantity" required="required" name="item[' + item_row + '][quantity]" type="text" id="item-quantity-' + item_row + '">';
    html += '</td>';
    html += '<td>';
    html += '<input class="form-control text-right" required="required" name="item[' + item_row + '][return_quantity]" type="text" id="item-return_quantity-' + item_row + '">';
    html += '</td>';
    html += '<td>';
    html += '<input class="form-control text-right"   required="required" name="item[' + item_row + '][total_price]" type="text" id="item-total_price-' + item_row + '">';
    html += '</td>';
    html += '</tr>';
    $('#items tbody #addItem').before(html);
    item_row++;
  }
function update_amounts(){
        var sum = 0.0;
        $('#items > tbody  > tr.data_entry').each(function() {
            var qty = $(this).find('.quantity').val();
             // console.log(qty);
            var price = $(this).find('.sale_price').val();
            var amount = (qty*price)
            sum+=amount;
            // console.log(price);
             console.log("Sub Total: " + amount);         
            $('.sub_total').text(''+amount);
            
    });
    console.log("Grand Total: " + sum);
    
    //just update the total to sum  
    $('.grand_total').text(sum);
   }
     $('table#items tbody').on("change","tr .quantity",function() {
           //var qty = $(this).val();   
           // alert("Change");
           update_amounts();
     });
<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table class="table table-bordered table-responsive" id="items">
                    <thead>
                      <tr style="background-color: #f9f9f9;">
                        <th width="5%"  class="text-center">Actions</th>
                        <th width="10%" class="text-left">Item</th>
                        <th width="8%" class="text-left">Unit Price</th>
                        <th width="11%" class="text-left">Purchase Price</th>
                        <th width="8%" class="text-left">Tax Rate</th>
                        <th width="5%" class="text-right">Discount(%)</th>
                        <th width="10%" class="text-right">Sale Price</th>
                        <th width="5%" class="text-right">Quantity</th>
                        <th width="13%" class="text-right">Return Quantity</th>
                        <th width="10%" class="text-right">Total Price</th>
                      </tr>
                    </thead>
                    <tbody>
                      <?php $item_row = 0; ?>
                      <tr class="data_entry" id="item-row-{{ $item_row }}">
                        <td class="text-center" style="vertical-align: middle;">
                          <button type="button" onclick="$('#item-row-' + item_row + '').remove();" title="Delete" class="btn btn-xs btn-danger"><i class="fa fa-trash"></i></button>
                        </td>
                        <td>
                          <select class="form-control select2 typeahead" required="required" name="item[{{ $item_row }}][item_id]" id="item-item_id-{{ $item_row }}">
                            <option>Select</option>
                            <option value="item1">item1</option>
                            <option value="item2">item2</option>
                            <option value="item3">item3</option>
                            <option value="item4">item4</option>
                          </select>
                          <input name="item[{{ $item_row }}][item_id]" type="hidden" id="item-id-{{ $item_row }}">
                        </td>
                        <td>
                          <input class="form-control text-right" required="required" name="item[{{ $item_row }}][unit_price]" type="text" id="item-unit_price-{{ $item_row }}">
                        </td>
                        <td>
                          <input class="form-control text-right" required="required" name="item[{{ $item_row }}][purchase_price]" type="text" id="item-purchase_price-{{ $item_row }}">
                        </td>
                        <td>
                           <input class="form-control text-right" required="required" name="item[{{ $item_row }}][tax_rate]" type="text" id="item-tax_rate-{{ $item_row }}">
                        </td>
                        <td>
                          <input class="form-control text-right" required="required" name="item[{{ $item_row }}][discount_amount]" type="text" id="item-discount_amount-{{ $item_row }}">
                        </td>
                        <td>
                          <input class="form-control text-right sale_price" required="required" name="item[{{ $item_row }}][sale_price]" type="text" id="item-sale_price-{{ $item_row }}">
                        </td>
                        <td>
                          <input class="form-control text-right quantity" required="required" name="item[{{ $item_row }}][quantity]" type="text" id="item-quantity-{{ $item_row }}">
                        </td>
                        <td>
                          <input class="form-control text-right" required="required" name="item[{{ $item_row }}][return_quantity]" type="text" id="item-return_quantity-{{ $item_row }}">
                        </td>
                        <td>
                           <input class="form-control text-right" required="required" name="item[{{ $item_row }}][total_price]" type="text" id="item-total_price-{{ $item_row }}"  >
                        </td>
                      </tr>
                      <?php $item_row++; ?>
                      <tr id="addItem">
                          <td class="text-center"><button type="button" onclick="addItem();" title="Add" class="btn btn-xs btn-primary" data-original-title="Add"><i class="fa fa-plus"></i></button></td>
                      </tr>
                      <tr>
                        <td colspan="8"></td>
                        <td class="text-right align-middle"><strong>Sub Total</strong></td>
                        <td>
                          <input type="text" name="sub_total" id="sub_total"   class="form-control text-right sub_total">
                        </td>
                      </tr>
                      <tr>
                        <td colspan="8"></td>
                        <td class="text-right align-middle"><strong>Tax Amount</strong></td>
                        <td>
                          <input type="text" name="tax_amount" id="tax_amount"   class="form-control text-right">
                        </td>
                      </tr>
                      <tr>
                        <td colspan="8"></td>
                        <td class="text-right align-middle"><strong>Discount Amount</strong></td>
                        <td>
                          <input type="text" name="discount_amount" id="discount_amount"   class="form-control text-right">
                        </td>
                      </tr>
                      <tr>
                        <td colspan="8"></td>
                        <td class="text-right align-middle"><strong>Grand Total</strong></td>
                        <td>
                          <input type="text" name="grand_total" id="grand_total"   class="form-control text-right grand_total">
                        </td>
                      </tr>
                      <tr>
                        <td colspan="8"></td>
                        <td class="text-right align-middle"><strong>Cash Received</strong></td>
                        <td>
                          <input type="text" name="cash_received" id="cash_received" class="form-control text-right">
                        </td>
                      </tr>
                      <tr>
                        <td colspan="8"></td>
                        <td class="text-right align-middle"><strong>Cash Refund</strong></td>
                        <td>
                          <input type="text" name="cash_refund" id="cash_refund"   class="form-control text-right">
                        </td>
                      </tr>
                      <tr>
                        <td colspan="8"></td>
                        <td class="text-right"><a href="" class="btn btn-warning">Clear</a></td>
                        <td><button type="submit" class="btn btn-primary">Save</button></td>
                      </tr>
                    </tbody>
                  </table>

请尝试以下更改

$('.quantity').change(function() {
   update_amounts();
});

$(document).on("change",".quantity",function() {
   update_amounts();
});

并在html中添加类" product_row" tr 

  <tr id="item-row-<?php echo $item_row; ?>" class="product_row">

也在AddItem函数中

 html  = '<tr id="item-row-' + item_row + '" class="product_row">';

更改每个功能

 $('#items > tbody  > tr.product_row').each(function() {
            var qty = $(this).find('.quantity').val();
            var price = $(this).find('.sale_price').val();
            var amount = (qty*price)
            sum+=amount;
            $('.sub_total').val(amount);
    });

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium