使用jquery无法工作的附加行计算

时间：2017-12-19 05:34:07

标签： javascript jquery twitter-bootstrap jquery-calculation

我正在尝试计算附加行的值。但是，计算脚本不起作用。 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>

2 个答案:

答案 0 :(得分：0)

虽然，你的问题有点不清楚和不完整，但我设法找出导致错误的事情，这是

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

以上，包含tr中的所有tbody，包括以下行：

小计，税额，折扣金额，总计，收到的现金和＆amp;现金退款。

没有数量input，因此导致在控制台中记录qty变量时可以看到的未定义错误。我已针对给定的错误更正了您的代码段，只需记录计算（您可以自己添加输入值），将其附在我的答案中以供参考。

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

＆＃13;
＆＃13; 
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();
     });
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

请尝试以下更改

$('.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);
    });
相关问题
最新问题