如何对克隆表输入值中两个输入值的乘积求和

问题描述

我无法对克隆表输入值的小计求和.
这是工作提琴: http://jsfiddle.net/rKjbg/

I am unable to do summation of the subtotal from the clone table input values.
Here is working fiddle: http://jsfiddle.net/rKjbg/

var $to_clone = $('.tr_clone').first().clone();

$("table").on('click', 'input.tr_clone_add', function () {
    var $tr    = $(this).closest('.tr_clone');
    var $clone = $to_clone.clone();
    $clone.find(':text').val('');
    $tr.after($clone);
});

$("table").on('click', 'input.tr_clone_remove', function () {
    var $tr    = $(this).closest('.tr_clone');
    $tr.remove();
});

$(document).on("keyup", ".quantity, .price", function(){
    var prtCont = $(this).parent().parent();
    var prce = parseInt(prtCont.find('.price').val()) - 0;
    var qnty = parseInt(prtCont.find('.quantity').val()) - 0;
    if(!isNaN(prce) && !isNaN(qnty)){
        prtCont.find('.subtotal').val(prce * (qnty));
    }else{
        prtCont.find('.subtotal').val("");
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table width="100%" border="0"  >
<tr>
    <td>Item</td>
    <td>Quantity</td>
    <td>U$ Price</td>
<td>Subtotal</td>
    <td>Add</td>
    <td>Remove</td>
</tr>
<tr class="tr_clone">
    <td>
        <select style="width:200px" name="itens[]">
        <option value="0"></option>
        <option value="1">Item A</option>
        <option value="2">Item B</option>
        <option value="3">Item C</option>
    </td>                                            
    <td><input type="text" size="5" maxlength="5" name="qtd" class="quantity text ui-widget-content ui-corner-all"></td>
    <td><input type="text" size="10" maxlength="10" name="price" class="price text ui-widget-content ui-corner-all"></td>
    <td><input type="text" size="10" maxlength="10" name="subtotal" class="subtotal text ui-widget-content ui-corner-all"></td>
    <td><input type="button" name="add" value="Add" class="tr_clone_add"></td>
    <td><input type="button" name="remove" value="Remove" class="tr_clone_remove"></td>
</tr>
</table>

推荐答案

我创建了一个函数updateTotalOfSubTotal()，该函数应在发生的每个触发器上调用.在您的情况下，其为keyup.您也可以在其他触发器上调用updateTotalOfSubTotal.

I have created a function updateTotalOfSubTotal() which should be called on every trigger that happens. In your case, its keyup. You can call updateTotalOfSubTotal at other triggers too.

这是更新的代码，可为您提供总计的小计:

Here is the updated code that would give you total of subtotal:

var $to_clone = $('.tr_clone').first().clone();

$("table").on('click', 'input.tr_clone_add', function() {
  var $tr = $(this).closest('.tr_clone');
  var $clone = $to_clone.clone();
  $clone.find(':text').val('');
  $tr.after($clone);
});

$("table").on('click', 'input.tr_clone_remove', function() {
  var $tr = $(this).closest('.tr_clone');
  $tr.remove();
  updateTotalOfSubTotal();
});

$(document).on("keyup", ".quantity, .price", function() {
  var prtCont = $(this).parent().parent();
  var prce = parseInt(prtCont.find('.price').val()) - 0;
  var qnty = parseInt(prtCont.find('.quantity').val()) - 0;
  if (!isNaN(prce) && !isNaN(qnty)) {
    prtCont.find('.subtotal').val(prce * (qnty));
  } else {
    prtCont.find('.subtotal').val("");
  }
  updateTotalOfSubTotal();
});

function updateTotalOfSubTotal() {
  var totalPoints = 0;
  $(".subtotal").each(function() {
    if (parseInt($(this).val()))
      totalPoints += parseInt($(this).val());
  });
  $(".totalOfSubTotal").text(totalPoints);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table width="100%" border="0">
  <tr>
    <td>Item</td>
    <td>Quantity</td>
    <td>U$ Price</td>
    <td>Subtotal</td>
    <td>Add</td>
    <td>Remove</td>
  </tr>
  <tr class="tr_clone">
    <td>
      <select style="width:200px" name="itens[]">
        <option value="0"></option>
        <option value="1">Item A</option>
        <option value="2">Item B</option>
        <option value="3">Item C</option>
    </td>                                            
    <td><input type="text" size="5" maxlength="5" name="qtd" class="quantity text ui-widget-content ui-corner-all"></td>
    <td><input type="text" size="10" maxlength="10" name="price" class="price text ui-widget-content ui-corner-all"></td>
    <td><input type="text" size="10" maxlength="10" name="subtotal" class="subtotal text ui-widget-content ui-corner-all"></td>
    <td><input type="button" name="add" value="Add" class="tr_clone_add"></td>
    <td><input type="button" name="remove" value="Remove" class="tr_clone_remove"></td>
</tr>
</table>
<div class="totalOfSubTotal"></div>

这篇关于如何对克隆表输入值中两个输入值的乘积求和的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！