1

概括

  • 我正在制作一个订购单，它将“项目数量”乘以“单价”，以通过 JavaScript 给出“小计”。
  • 订单存储在 MySQL 数据库中并通过 PHP 检索。
  • 我想手动输入“单价”，我希望在我输入该数字后会发生乘法。
  • 有 10 行项目（一个数组）。
  • 所有编写的代码都按预期正确执行。

问题

  • 我的 JavaScript 函数只为第一行运行，而不是其他任何行。
  • 我想为每一行，每种项目类型运行。

我的代码

JS

function calc(){
    baseprice=parseInt(document.getElementById("baseprice").value);
    units=parseInt(document.getElementById("units").value);
    x=baseprice*units;
    document.getElementById("sub").value=x;
}

PHP/SQL

$alter=0;
//previous miscellaneous code
while($rows=mysql_fetch_array($sql))
{
    $alter=$alter+1;
 //edit       
$subCalc="<td><input name='units_".$alter."' id='units_".$alter."' type='hidden' value=".$rows['SUM(pizza_orders.qty)']."><input name='baseprice_".$alter."' id='baseprice_".$alter."' type='text' size='2' onchange='calc(this);'></td><td><input name='sub_".$alter."' id='sub_".$alter."' type='text' size='3'></td></tr>";

 //alternates the table row colour by modulus
    if ($alter %2 ==0){
        echo "<tr><td>".$rows['item_order']."</td>";
        echo "<td>".$rows['SUM(pizza_orders.qty)']."</td>".$subCalc;
    }else{
            echo "<tr class=\"alt\"><td>".$rows['item_order']."</td>";
            echo "<td>".$rows['SUM(pizza_orders.qty)']."</td>".$subCalc;
    }
}

样本结果/情况

在此处输入图像描述

延期

在右下角进行总计，将所有小计字段添加为“onchange”。

subTotal=parseInt(document.getElementById("sub" + el.id.replace('baseprice', '')).value);                                                                                   document.getElementById("grandtotal")=  subTotal+parseInt(document.getElementById("grandtotal").value);

演示 > JS 小提琴

4

1 回答 1

1

一个 id 在页面上必须是唯一的，您在页面上有多个具有相同 id 的输入。因此，为什么它只在第一个输入上执行计算。最好的办法是在“baseprice”和“units”输入中附加一个数值来区分每一行。此外，将“this”关键字传递给 calc 函数以引用触发该函数的元素。

示例行：

    <tr>
    <td>
    <input id="units_1" name="units_1" type="hidden" value="10" />
<!-- attach an onchange handler to baseprice_1, when a change is made trigger the calc function. -->
    <input id="baseprice_1" name="baseprice_1" type="text" onchange="calc(this);" />
    <input id="sub_1" name="sub_1" type="text" />
    </td>
    </tr>

JS：

/* An array to store the subtotals. */
grandTotalArr = [];

    function calc(el){
/* el = this (which is a reference to baseprice_1) */
        baseprice=parseInt(el.value);
        units=parseInt(document.getElementById("units" + el.id.replace('baseprice', '')).value);
        x=baseprice*units;
        document.getElementById("sub" + el.id.replace('baseprice', '')).value=x;

/* Store the subtotal in the grandTotalArr using it's id as the key. */
grandTotalArr["sub" + el.id.replace('baseprice', '')] = x;
/* Implode all values with the + operator, and evaluate as a JS expression. Once evaluated, update the grand total. */
document.getElementById('grand_total').value = eval(grandTotalArr.join('+'));
    }
于 2012-08-16T13:24:51.743 回答