Question

我有两列，数量和定价。另一列总计，使用jQuery函数计算。

以下是我如何计算总计列的代码：

$('#TableBodyId').on("keyup keypress blur change", "input.proposal-line-pricing, input.proposal-line-quantity", function () {
    var result = 1,
        $this = $(this).parents('tr');
    $this.find('input.proposal-line-pricing, input.proposal-line-quantity').each(function () {
        result *= parseFloat(this.value);
    });
    $this.find("input.proposal-line-total").val(parseFloat(result).toFixed(2));
});

在表格的页脚，是一个 div ，它显示总计列的总和。

以下是我如何计算总和的代码：

$('#TableBodyId').on("keyup keypress blur change", "input.proposal-line-total", function () {
    var $pricings = $("#TableBodyId").find(".proposal-line-total");
    var pricingTotal = self.calculateSum($pricings);
    $("#PricingTotal strong").html(parseFloat(pricingTotal).toFixed(2));
});

为了反映页脚的变化，我不得不在总列中触发某些内容，否则它不会发生变化。现在，我这样做：

window.setInterval(function () {
    $('input.proposal-line-total').trigger("blur")
}, 500);

有没有其他方法可以每隔500毫秒轮询页面并有效地实现它？我需要它立即反映 div 的变化。

Answer 1

我假设您要在数量和价格输入中进行的每次更改后更新行总计和总计。

这样做：

在您的数量和价格输入中收听键盘事件并更改事件，并执行以下操作：
计算一行的总数并显示它
将所有行总计累计为总计并显示

以下是解决方案：https://codepen.io/anon/pen/BdvXMb

// binding event listener for every keyup
// IMPORTANT: don't forget to deal with non numerical values when parsing
$("#basket input").on("keyup change", function () {
    var thisRow = $(this).parent();
    // retrieving the price value
    var price = parseFloat(thisRow.children(".price").val());
    // retrieving the quantity value
    var quantity = parseFloat(thisRow.children(".quantity").val());
    // if there are invalid inputs at any moment, stop the function
    if (isNaN(price) || isNaN(quantity)) {
        return false;
    }
    // calculating the total value of this row
    var rowTotal = (price * quantity).toFixed(2);
    // displaying the total value of this row
    thisRow.children(".total").text(rowTotal);
    var grandTotal = 0;
    var allRows = thisRow.parent().find(".item");
    // get the total colum of each row and accumulate their values
    allRows.find(".total").each(function () {
        var rowTotal = parseFloat($(this).text());
        grandTotal += rowTotal;
    });
    // display the grand total value
    $("#grand-total").html(grandTotal.toFixed(2));
});
/* HTML:
<div id="basket">
  <div class="item">
    <input class="price">
    <input class="quantity">
    <div class="total">0</div>
  </div>
  <div class="item">
    <input class="price">
    <input class="quantity">
    <div class="total">0</div>
  </div>
</div>
<div>Grand total: <span id="grand-total">0</span></div>
*/
/* CSS:
.item {
   display: flex;
}
*/

编辑：如果要向表中动态添加新行，可以将匿名函数分开并为其分配变量，然后将其附加到稍后附加到表中的每个新行输入。 https://codepen.io/anon/pen/xLMxXo

var handleInputChange = function () { /* same as above */ }
var basket = $("#basket");
var newItemRow = $("..."); // your row html here
newItemRow.find("input").on("keyup change", handleInputChange);
newItemRow.appendTo(basket);

Answer 2

不是刷新每500毫秒，而是在div中发生更改时尝试刷新，并且可以添加计时器，以便事件不会触发两次并等到上一个操作完成（如果可能，请添加html）。

如何动态显示div部分中动态列的值？

2 个答案: