【问题标题】:How to calculate summation same id of two products from cloned input values jquery [duplicate]如何从克隆的输入值jquery计算两个产品的总和相同的ID [重复]
【发布时间】:2017-06-12 11:12:53
【问题描述】:

如何对第三类产品进行每次求和。

这是我的类似作品。

How to do summation of product of two input values from a clone table input values

$("table").on("change", "input", function() { //use event delegation
  var tableRow = $(this).closest("tr"); //from input find row
  var one = Number(tableRow.find(".one").val()); //get first textbox
  var two = Number(tableRow.find(".two").val()); //get second textbox
  var total = one * two; //calculate total
  tableRow.find(".three").val(total); //set value
});

$("button.add").on("click", function() {
  var tbody = $("table tbody");
  tbody.find("tr:eq(0)").clone().appendTo(tbody).find("input").val("");
});

function updateTotalOfSubTotal() {
  var totalPoints = 0;
  var tableRow = $(this).closest("tr");
  var test = tableRow.find(".three").val();
  totalPoints += test;
  console.log(totalPoints);
}

updateTotalOfSubTotal();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td><input class="one" /></td>
      <td><input class="two" /></td>
      <td><input class="three" readonly="readonly" /></td>
    </tr>
  </tbody>
</table>

<button class="add">Add</button>

【问题讨论】:

  • 究竟是什么不起作用?你预计会发生什么?
  • @mplungjan。我正在尝试所有三类的总和
  • 你的意思是var total = 0; $(".three").each(function() { var val = this.value; total += val=="" || isNaN(val)?0:parseInt(val); });
  • @mplungjan。是的,你是对的。我试过你的方法。我没有成功
  • @krishna 为我工作:jsfiddle.net/mplungjan/j5fjys36

标签: javascript jquery sum


【解决方案1】:

这行得通 - 每次都要注意 keyup 和 .subTotal 的循环,而不仅仅是第一次

我已经清理了代码并使用了您其他问题中的 HTML

function totalIt() {
  var total = 0;
  $(".subtotal").each(function() {
    var val = this.value;
    total += val == "" || isNaN(val) ? 0 : parseInt(val);
  });
  $("#total").val(total);
}
$(function() {
  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');
    if ($tr.index() > 1) $tr.remove(); // leave the first
    totalIt();
  });

  $(document).on("keyup", ".quantity, .price", function() {
    var $row = $(this).closest("tr"),
      prce = parseInt($row.find('.price').val()),
      qnty = parseInt($row.find('.quantity').val()),
      subTotal = prce * qnty;
    $row.find('.subtotal').val(isNaN(subTotal) ? 0 : subTotal);
    totalIt()
  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table width="100%" border="0">
  <thead>
    <tr>
      <th>Item</th>
      <th>Quantity</th>
      <th>U$ Price</th>
      <th>Subtotal</th>
      <th>Add</th>
      <th>Remove</th>
    </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>
<input type="text" readonly id="total" />

【讨论】:

  • @mplugjan。嗨,感谢您的宝贵时间。我有一个额外的字段,所以我可以删除完整的行。所以根据行数求和应该更新。请检查这些格式。所以我可以添加或删除行。 stackoverflow.com/questions/44494914/…
  • @mplungjain。相同的功能不适用于此
  • 使用其他问题中的 HTML
  • 如果此代码不起作用,请您检查一下jsfiddle.net/jvk3/6ath5vy9/4
  • 以什么方式不起作用?在 Chrome 中为我工作
猜你喜欢
  • 2020-03-31
  • 2010-09-29
  • 2012-05-07
  • 1970-01-01
  • 2011-09-27
  • 2013-09-04
  • 1970-01-01
  • 2021-02-25
  • 1970-01-01
相关资源
最近更新 更多