onKeyUp 事件计算不适用于 PHP 生成的表单中的以下行，除了第一行 - onKeyUp event calculation not working on the following rows from php generated forms except the first one

    --------------------------------------------------
    |No|Style No|Item Desc|Qty|Unit Price|Total Price|
    --------------------------------------------------
    |1 |Style 1 |Item 1   |44 |3.00      |132.00     |
    |2 |Style 2 |Item 2   |3  |3.00      |9.00       |
    |3 |Style 3 |Item 3   |23 |34.00     |782.00     |
    |4 |Style 4 |Item 4   |56 |78.00     |4368.00    |
    |5 |Style 5 |Item 5   |34 |58.00     |1972.00    |
    --------------------------------------------------
    (Submit button)
    GRAND TOTAL: RM[_________ textbox] (Calculate Total button)

或者，这是屏幕截图图像：http://img715.imageshack.us/img715/8885/calcs.jpg

我有这个表，其中包含基于数据库中的表从 PHP 脚本生成的表单。我一直在努力弄清楚如何在第一行之后制作以下行，以使用 JavaScript 处理 onkeyup 事件。第一行(在红色方块框中(作为上面的屏幕截图链接，似乎工作得很好，例如，如果我将第一行中的"Qty"值更改为"1"，它将自动计算并生成"总价"到"3.00"的输出，但不在随后的行中，每当我插入新值时它什么都不做。奇怪的是，当我单击"计算总计"按钮时，它确实计算了包括"总计"文本框中的每一行

我似乎无法弄清楚问题到底是什么以及如何解决它。任何帮助将不胜感激。

以下是源代码：

<?php require_once('Connections/rfps.php'); ?>
<?php
//initialize the session
if (!isset($_SESSION)) {
  session_start();
}
?>
<html>
<head>
<script type="text/javascript">
function calc(idx) {
  var price = parseFloat(document.getElementById("cost"+idx).value)*
              parseFloat(document.getElementById("qty"+idx).value);
  //  alert(idx+":"+price);  
  document.getElementById("price"+idx).value= isNaN(price)?"0.00":price.toFixed(2);
}
function totalIt() {
  var qtys = document.getElementsByName("qty[]");
  var total=0;
  for (var i=1;i<=qtys.length;i++) {
    calc(i);  
    var price = parseFloat(document.getElementById("price"+i).value);
    total += isNaN(price)?0:price;
  }
  document.getElementById("total").value=isNaN(total)?"0.00":total.toFixed(2)                       
}      
window.onload=function() {
  document.getElementsByName("qty[]")[0].onkeyup=function() {calc(1)};
  document.getElementsByName("cost[]")[0].onkeyup=function() {calc(1)};
}
</script>
</head>
<body>
<?php
$sql = "SELECT * FROM transaction_item";
$result = mysql_query($sql,$rfps) or die($sql."<br/><br/>".mysql_error());
//start a table
echo '<form name="form1" method="post" action="">
<table  width="350px" border="1" style="border-collapse:collapse;">';
 
//start header of table
echo '<tr>
<th id="datatable" > <div align="center">No</div></th>
<th style="display:none;"><div align="center">Trans<br />Item<br />ID</div></th>
<th style="display:none;"><div align="center">Trans<br />Info<br />ID</div></th>
<th><div align="center">Style<br />No</div></th>
<th><div align="center">Item<br />Desc</div></th>
<th><div align="center">Qty</div></th>
<th><div align="center">Unit<br />Price</div></th>
<th formula="cost*qty"summary="sum"><div align="center">Total<br />Price</div></th>
</tr>';
 
//loop through all results
$i=1;
while($r=mysql_fetch_object($result)){
 
//print out table contents and add id into an array and email into an array
echo '<tr>
<td id="datatable"> <div align="center">'.$i.'</div></td>
<td style="display:none;"><div align="center">'.$r->trans_item_id.'</div></td>
<td style="display:none;"><div align="center">'.$r->trans_info_id.'</div></td>
<td><div align="center"><input type="text" id="style'.$i.'" name="style[]" value="'.$r->style_no.'" size="10" /></div></td>
<td><div align="center"><input type="text" id="item'.$i.'" name="item[]" value="'.$r->item_desc.'" size="25" /></div></td>
<td><div align="center"><input type="text" id="qty'.$i.'" name="qty[]" value="'.$r->qty.'" size="2" /></div></td>
<td><div align="center"><input type="text" id="cost'.$i.'" name="cost[]" value="'.$r->unit_price.'" size="5" /></div></td>
<td><div align="center"><input type="text" id="price'.$i.'" name="price[]" value="'.$r->total_price.'" size="6" /></div></td>
</tr>';
++$i;
}
 
//submit the form
echo'</table>
<input type="submit" name="Submit" value="Submit">
<p><strong>GRAND TOTAL: RM</strong>
<input type="text" readonly="readonly" id="total" />
<input type="button" value="Calculate Total" onclick="totalIt()" /></p>
</form>';
?>
</body>
</html>

好吧，快速浏览一下，问题是你只抓住第一个qty[]元素和第一个cost[]元素，以添加侦听器。

看看 JavaScript 的最后一部分，在那里 - window.onload = function (){...部分：

window.onload=function() {
  document.getElementsByName("qty[]")[0].onkeyup=function() {calc(1)};
  document.getElementsByName("cost[]")[0].onkeyup=function() {calc(1)};
}

这很好，但这意味着您只需要抓取每个盒子的第一个框，并发送"qty1"和"cost1"数据。

试试这个，改为：

window.onload = function () {
    var qtyArr = document.getElementsByName("qty[]"),
        costArr = document.getElementsByName("cost[]"),
        length = qtyArr.length,
        i = 0, func = null;
    for (; i < length; i++) {
        func = (function (i) { return function () { calc(i + 1); }; }(i));
        qtyArr[i].onkeyup = func;
        costArr[i].onkeyup = func;
    }
};

执行此操作的更合适的方法可能是使用事件委派：

收听包含这些行的整个表上的onkeyup。
如果已编辑的元素(使用 onkeyup (是要使用的元素：
if (event.target.name ==
= "qty[]" || event.target.name === "cost[]"( {...}
火calc是这样的：
calc( event.target.id.replace("qty","").replace("cost","") );

第一种方法应该可以正常工作，如果你想要一个快速而肮脏的解决方案。