Question

我正在尝试计算多行的价格。我让它工作一行但是，当我把它放入我的for循环时，onchange函数似乎不起作用。有谁知道为什么会这样？

JavaScritpt：

function cal()
{
    var price = document.getElementById('priceper_0').value;
    var per_pack = document.getElementById('per_pack_0').value;
    var quantity = document.getElementById('quantity_0'.value;


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


}

PHP / HTML：

<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="cal();" 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>

Answer 1

原因是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);


}

Answer 2

我认为对于多行，你应该给你的cal函数给出行的编号，这样它就可以使用正确的行而不是数字0。

Answer 3

你也可以试试onblur，这意味着离开文本框焦点。你在表单中使用的数组是什么，你的表单生成正常。

如果表单生成正常，你也可以这样做，将你的$ i传递给你的html中每一行的cal（），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);


}

Answer 4

您可以在输入字段中添加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 */ ?>

然后在javascript代码中使用循环

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

Answer 5

＆＃13;

Int(Double.greatestFiniteMagnitude)

＆＃13;

function getTotal($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);
}

＆＃13;

计算多行的总价

5 个答案: