Javascript 计算多行的总价

我正在计算多行的价格。但是，当我将onchange函数放入for循环时，它似乎不起作用。有人知道为什么吗

JavaScriptpt:

php/HTML:

纸张
价格
每包
量
小计

原因是id问题，您应该为元素使用唯一id

试试这个

将

$i

传递给

calc（）

函数，然后执行如下操作

onChange=cal($i)

作用

function cal($i)
{
    var price = document.getElementById('priceper_'+$i+'').value;
    var per_pack = document.getElementById('per_pack_'+$i+'').value;
    var quantity = document.getElementById('quantity_'+$i+'').value;


    document.getElementById('subtotal_'+$i+'').value = ((price/per_pack)*quantity).toFixed(2);


}

---

我认为，对于多行，您应该将行数指定给cal函数，这样它就可以使用正确的行，而不是数字0。

您也可以尝试使用模糊，这意味着离开文本框焦点。您在表单中使用的数组是什么？表单值是否生成良好

如果表单生成得很好，您也可以这样做，为html中的每一行将$i传递给cal（）like，cal（$i）

function cal(ind)
{
    var price = document.getElementById('priceper_'+ind+').value;
    var per_pack = document.getElementById('per_pack_'+ind+').value;
    var quantity = document.getElementById('quantity_'+ind+'.value;


     document.getElementById('subtotal_'+ind').value = ((price/per_pack)*quantity).toFixed(2);


}

---

您可以将php行数添加到输入字段中，然后从javascript获取该数字，并使用for循环计算所有行进程。 看看下面的代码

    <table>
    <tr>
    <td>Paper</td>
    <td align="center">Price</td>
    <td align="center">Per Pack</td>
    <td align="center">Quantity</td>
    <td align="center">Sub Total</td>
    </tr>

    <tr class="multipp">
    <td><input type="text" name="description_0" id="description_0" size="85" maxlength="70" value="<?php echo htmlspecialchars($description[0]); ?>" /></td>
    <td><input type="text" name="priceper_0" id="priceper_0" size="10" maxlength="9" value="" /></td>
    <td><input type="text" name="per_pack_0" id="per_pack_0" size="10" maxlength="9" value="" /></td>
    <td><input type="text" name="quantity_0" id="quantity_0" size="10" maxlength="9" onChange="cal();"/></td>
    <td><input type="text" name="subtotal_0" id="subtotal_0" class="txt" size="15" maxlength="9" value="" /></td>
    </tr>

    <?php
    for($i=1; $i<10; $i++) 
    {
     echo '<tr class="multipp">';
    echo '<td><input type="text" name="description_'.$i.'" id="description_'.$i.'" size="85" maxlength="70" value="'.htmlspecialchars($description[$i]).'" /></td>';
    echo '<td><input type="text" name="priceper_'.$i.'" id="priceper_'.$i.'" size="10" maxlength="9" value="'.htmlspecialchars($priceper[$i]).'" /></td>';
    echo '<td><input type="text" name="per_pack_'.$i.'" id="per_pack_'.$i.'" class="txt" size="10" maxlength="9" value="'.htmlspecialchars($priceper[$i]).'" /></td>';
    echo '<td><input type="text" name="quantity_'.$i.'" id="quantity_'.$i.'" size="10" maxlength="9" onChange="calSubTotal(<?=$i?>);" value="'.htmlspecialchars($quantity[$i]).'" /></td>';
    echo '<td><input type="text" name="subtotal_'.$i.'" id="subtotal_'.$i.'" size="15" maxlength="9" value="'.htmlspecialchars($subtotal[$i]).'" /></td>';
    echo '</tr>';
    }
    ?>
    </table>
<br />
Total: <input type="text" name="Total" id="Total" size="15" maxlength="9" value="" />
    <input type="hidden" name="rowcounter" id="rowcounter" value="<?=$i?>: />
    <?php /*In this example the row counter is alwase 10 */ ?>

纸张
价格
每包
量
小计


总数：

函数getTotal（$i）
{
var price=document.getElementById（'priceper_'+$i+''）.value；
var per_pack=document.getElementById（'per_pack++$i++'）。值；
var quantity=document.getElementById（'quantity_'+$i+''）.value；
document.getElementById（'subtotal\'+$i+''）。值=（（价格/每包）*数量）；
}

纸张
价格
每包
量
小计
是否需要更改中的id以匹配函数中的id？是@user3009232将i传递给函数，然后尝试上述方法我已将$i传递给我的cal函数，并已重命名id以匹配我的cal函数中的id。现在发生的情况是，我的文本显示在第二行，而不是第一行，它已停止计算，小计字段为空：S
function cal(ind)
{
    var price = document.getElementById('priceper_'+ind+').value;
    var per_pack = document.getElementById('per_pack_'+ind+').value;
    var quantity = document.getElementById('quantity_'+ind+'.value;


     document.getElementById('subtotal_'+ind').value = ((price/per_pack)*quantity).toFixed(2);


}

    <table>
    <tr>
    <td>Paper</td>
    <td align="center">Price</td>
    <td align="center">Per Pack</td>
    <td align="center">Quantity</td>
    <td align="center">Sub Total</td>
    </tr>

    <tr class="multipp">
    <td><input type="text" name="description_0" id="description_0" size="85" maxlength="70" value="<?php echo htmlspecialchars($description[0]); ?>" /></td>
    <td><input type="text" name="priceper_0" id="priceper_0" size="10" maxlength="9" value="" /></td>
    <td><input type="text" name="per_pack_0" id="per_pack_0" size="10" maxlength="9" value="" /></td>
    <td><input type="text" name="quantity_0" id="quantity_0" size="10" maxlength="9" onChange="cal();"/></td>
    <td><input type="text" name="subtotal_0" id="subtotal_0" class="txt" size="15" maxlength="9" value="" /></td>
    </tr>

    <?php
    for($i=1; $i<10; $i++) 
    {
     echo '<tr class="multipp">';
    echo '<td><input type="text" name="description_'.$i.'" id="description_'.$i.'" size="85" maxlength="70" value="'.htmlspecialchars($description[$i]).'" /></td>';
    echo '<td><input type="text" name="priceper_'.$i.'" id="priceper_'.$i.'" size="10" maxlength="9" value="'.htmlspecialchars($priceper[$i]).'" /></td>';
    echo '<td><input type="text" name="per_pack_'.$i.'" id="per_pack_'.$i.'" class="txt" size="10" maxlength="9" value="'.htmlspecialchars($priceper[$i]).'" /></td>';
    echo '<td><input type="text" name="quantity_'.$i.'" id="quantity_'.$i.'" size="10" maxlength="9" onChange="calSubTotal(<?=$i?>);" value="'.htmlspecialchars($quantity[$i]).'" /></td>';
    echo '<td><input type="text" name="subtotal_'.$i.'" id="subtotal_'.$i.'" size="15" maxlength="9" value="'.htmlspecialchars($subtotal[$i]).'" /></td>';
    echo '</tr>';
    }
    ?>
    </table>
<br />
Total: <input type="text" name="Total" id="Total" size="15" maxlength="9" value="" />
    <input type="hidden" name="rowcounter" id="rowcounter" value="<?=$i?>: />
    <?php /*In this example the row counter is alwase 10 */ ?>

function calAllRows()
{
    var rowsCounter = document.getElementById('rowcounter').value;
    vat totalValue = 0;
    for(var i=0;i<rowsCounter ;i++)
    {
      var price = document.getElementById('priceper_' + i + '').value;
      var per_pack = document.getElementById('per_pack_' + i + '').value;
      var quantity = document.getElementById('quantity_' + i + ''.value;
      totalValue += (price/per_pack)*quantity;
    }


    document.getElementById('Total').value = totalValue.toFixed(2);
}

function calSubTotal(var i)
{
     var subTotalValue = 0;

      var price = document.getElementById('priceper_' + i + '').value;
      var per_pack = document.getElementById('per_pack_' + i + '').value;
      var quantity = document.getElementById('quantity_' + i + ''.value;
      subTotalValue += (price/per_pack)*quantity;


    document.getElementById('Total').value = subTotalValue.toFixed(2);
}