代码之家  ›  专栏  ›  技术社区  ›  Rashed Hasan Vijayaragavan

使用jquery进行追加行计算无效

jquery-calculation twitter-bootstrap jquery javascript
  •  2
  • Rashed Hasan Vijayaragavan  · 技术社区  · 8 年前

    我正在尝试计算附加行中的值。但是,计算脚本不起作用。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 回复  |  直到 8 年前
        1
  •  0
  •   Daniyal Nasir    8 年前

    虽然您的问题有些不清楚和不完整,但我已经找到了导致错误的原因 

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

    以上,包括所有 tr 在里面 tbody 含义包括具有以下内容的行:

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

    没有数量 input 因此,这会导致一个未定义的错误,当您记录 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>
        2
  •  0
  •   Venka Tesh user5397700    8 年前

    请尝试以下更改 

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


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

    并在html中添加类“product\u 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);
    });
    推荐文章
    joryl  ·  jQuery计数百分比-显示“未定义”
    10 年前
    关于   移动版
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号