Question

我在表单上有25行供用户输入（输入标记）中的项目代码，而qty（输入标记）与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

在此按下按键/向下/向上
问题是当我键入第一个数字时，它不计算值并显示金额，并且在输入第二个数字事件后再次触发但不是数量_j的多个整数值与price_j

如何制作活动，以便提供准确的金额。

html代码

<table border="1" align="center"> <thead> <tr> <th>#</th> <th>Item Name</th> <th>Item Code</th>  <th>Quantity</th> <th>Price</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>

Answer 1

AFAIK你必须将你的功能绑定到keyup以获得实际值。

如果这不起作用，你可以使用setTimeout（＆＃34; qtycal＆＃34;，100）对你的函数稍加延迟。您的用户将不会注意到它，并且会使您的计算有效。

Answer 2

看起来你计算得很好，但是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;

Answer 3

// @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环境，但我只是写了一个小提琴。也许这会给你提示如何解决你的问题。不要怪我，我只是在几分钟内就把它砍掉了。但它的确有效。这只是一个例子！

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

3 个答案: