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

Question

我有两列，数量和定价。另一列 Total 使用 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));
});

为了反射(reflect)页脚的变化，我必须触发总计列中的某些内容，否则它不会改变。现在，我正在这样做:

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

是否有其他方法可以不每隔 500ms 轮询一次页面并高效实现？我需要它立即反射(reflect) div 中的更改。

Answer 1

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

这样做:

1. 监听键盘事件以及数量和价格输入中的更改事件，并执行以下操作:
2. 计算一行的总计并显示
3. 将所有行总计累加为总计并显示

这是一个解决方案: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);