[英]calculation on keypress/keydown/keyup event in html
我在表單上有25行供用戶在(輸入標簽)中輸入項目代碼並針對Java腳本中的該項目代碼輸入數量(輸入標簽)以計算該項目數量的值並以金額顯示它們(輸入標簽)
在onKeypress / up / down中觸發的事件如下
function qtycal() {
for (i = 1; i <= 25; i++) {
var quantity_j = document.getElementById("quantity_" + i);
var price_j = document.getElementById("price_" + i);
var amount_j = document.getElementById("amount_" + i);
amount_j.value = price_j.value * quantity_j.value;
} // end of for
如按此鍵/下/上觸發
問題是當我鍵入第一個數字時,它不計算值並顯示金額,而在輸入第二個數字事件后,再次觸發,但沒有與price_j一起顯示quantity_j的整個值
如何制作事件,以便給出確切的金額。
html代碼
<table border="1" align="center">
<thead>
<tr>
<th>#</th>
<th>Item Name</th>
<th>Item Code</th>
<!--<th>Stock</th>-->
<th>Quantity</th>
<th>Price</th>
<!--<th>Discount %</th>
<th>Amount</th>-->
<!--<th>Discount Amount</th>-->
<th>Net Amount</th>
</tr>
</thead>
<tbody>
<?php for($i=1 ; $i<=25 ; $i++) { ?>
<tr>
<th> <?php echo "$i"; ?> </th>
<td><input id="itemName_<?php echo $i; ?>" onBlur="test()" class="orderInput" type="text" align="center" ></td>
<td><input id="itemCode_<?php echo $i; ?>" onBlur="loaditem()" class="orderInput" type="text" align="center" ></td>
<td><input id="quantity_<?php echo $i; ?>" onBlur="qtycal()" class="orderInput" type="text" align="center" ></td>
<td><input id="price_<?php echo $i; ?>" class="orderInput" type="text" align="center" readonly></td>
<td><input id="amount_<?php echo $i; ?>" class="orderInput" type="text" align="center" readonly ></td>
</tr>
<?php } ?>
</tbody>
<tfoot>
<tr>
<td id="tdTotal" colspan="2" style="font-size:16px"> <b>Totals</b></td>
<td id="totalspace" colspan="3"> </td>
<td><input id="netTotalAll" class="orderInput" type="text" readonly> </td>
</tr>
<button id="addBtn" ><img src="images/add.png" align="middle"></button>
</tfoot>
</table>
AFAIK,您必須將您的函數綁定到keyup以獲得實際值。
如果這樣不起作用,則可以使用setTimeout(“ qtycal”,100)稍微延遲一下函數。 您的用戶不會注意到它,它將使您的計算有效。
看來您正在計算就可以了,但是amount_j不是對DOM值的引用,因此請嘗試以下操作:
var quantity_j = document.getElementById("quantity_" + i).value;
var price_j = document.getElementById("price_" + i).value;
var amount_j = document.getElementById("amount_" + i).value;
amount_j = price_j * quantity_j;
document.getElementById("amount_" + i).value=amount_j;
// @see http://jsfiddle.net/scafa/GFsPY/
$(document).ready(function(){
// creating some sample data rows
var tb = $("<tbody>");
for(var i=1;i<=10;i++){
var row = $("<tr>");
row.append($("<td>").html(i));
row.append($("<td>").html("A"+i));
row.append($("<td>").html($("<input>").attr("size",8).val(Math.round(Math.random()*10))));
row.append($("<td>").html($("<input>").attr("size",8).val(Math.round(Math.random()*100))));
row.append($("<td>").append($("<input>")));
tb.append(row);
}
$("table").append(tb);
// calculating
$("table input").bind("blur", function(){
var total = 0;
$.each($("table tbody tr"), function(i, r){
var fields = $(r).find("input");
$(fields[2]).val($(fields[0]).val() * $(fields[1]).val());
total += parseInt($(fields[2]).val());
});
$(".total").val(total);
});
});
沒有PHP環境時,我只是寫了一個小提琴。 也許這給您提示了如何解決您的問題。 別怪我,我只是在幾分鍾之內就砍死了。 但這有效。 這只是一個例子!
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.