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

Question

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

＆＃13;

＆＃13;

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("");
    }
});

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

我创建了一个函数updateTotalOfSubTotal()，应该在发生的每个触发器上调用它。就你而言，它是keyup。您也可以在其他触发器上拨打updateTotalOfSubTotal。

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

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>