如何動態顯示div部分中動態列的值？

我有兩列，數量和定價。另一列合計它是使用jQuery函數計算的。如何動態顯示div部分中動態列的值？

下面是我如何計算總列代碼：

$('#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的變化。

來源

2017-08-31 Awais Syed

而不是每500ms刷新一次，當你的div發生變化時嘗試刷新，並且你可以添加一個定時器，這樣事件不會觸發兩次，並且等到上一個動作完成（如果可能，請添加html）。

來源

2017-08-31 21:13:30

請參閱https://stackoverflow.com/questions/17029211/how-to-add-a-wait-timer-on-an-input-field-keyup-event –

我使用車把和backbone.js在單擊按鈕時生成新行。代碼太大而無法發佈。我應該這樣做嗎？ –

如果可能，我希望至少看到div和一行。如果沒有，你可以嘗試以上回答的帖子。您只需更改觸發器，以便在前一個操作完成後立即觸發，而不是由用戶輸入觸發。另一種選擇是將觸發器設置爲回調，以便在先前的操作完成後自動觸發。 –

我假設你要更新行總計和總計你在產品數量和價格的投入讓每一個變化之後。

爲此：

監聽鍵盤事件，並改變你的產品數量和價格輸入事件，並做如下：
計算一個行的總並顯示它
積累所有的行合計爲總計並顯示它

這裏有一個解決方案： 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);

來源

2017-08-31 21:50:39 nvbach91

如何動態顯示div部分中動態列的值？

回答

相關問題