计算html中的keypress / keydown / keyup事件

i have 25 rows on a form for user entering the item code in (input tag) and qty (input tag) against that item code in java script calculate the value of that item's quantity and show them in amount (input tag)
The Event fired in the onKeypress/up/down is following

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

as in this fired on keypress/down/up

the problem is when i typed first digit it not calculate the value and show in amount and after entering second digit event again fired but not multyply whole value of quantity_j with price_j

How to make event so it give exact amount.

The html code

    <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 you have to bind your function to the keyup to get the actual value.

If that doesn't work you can put a little delay to your function using setTimeout("qtycal", 100). It will not be noted by your users and will make your calculation works.

It looks like you're calculating it just fine, but amount_j is not a reference to the DOM value so try this:

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);
  });

});

While having no PHP environment I just wrote a fiddle. Maybe this gives you a hint how to solve your problem. Don't blame me, I just hacked it in few minutes. But it works. This is only an example!