oninput计算html中多行的总数

时间:2016-11-11 08:20:05

标签: javascript php jquery html

我正在尝试计算每个新项目的总价格。我创建了一个onchange函数,它将根据用户输入的数量计算总价格,因此每次用户更改数量时,价格都会发生变化。我已经尝试运行我的代码,但它似乎没有在相应的文本框中计算和显示总数。

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);
}
<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_" size="85" maxlength="70" value="<?php echo htmlspecialchars($description[0]); ?>" /></td>
<td><input type="text" name="priceper_0" id="priceper_" size="10" maxlength="9" value="" /></td>
<td><input type="text" name="per_pack_0" id="per_pack_" size="10" maxlength="9" value="" /></td>
<td><input type="text" name="quantity_0" id="quantity_0" size="10" maxlength="9" onChange="getTotal(<?php echo $i;?>);"/></td>
<td><input type="text" name="subtotal_0" id="subtotal_" 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="getTotal('.$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>

1 个答案:

答案 0 :(得分:0)

像这样的东西

&#13;
&#13;
require 'binding_of_caller'

class Shuriken
  def self.aa(&block)
    instance_eval &block
  end

  def self.bb
    the_aa = binding.of_caller(2).eval('method(__method__)')
    puts the_aa
    # => #<Method: Shuriken.aa>
  end
end

Shuriken.aa do
  bb
end
&#13;
function getTotal() {
  var total = 0;
  for (var i=0,n=document.querySelectorAll(".multipp").length; i<n;i++) {
    var price = document.getElementById('priceper_'+i).value;
    var per_pack = document.getElementById('per_pack_'+i).value;
    var quantity = document.getElementById('quantity_'+i).value;
    var subtotal = (price/per_pack)*quantity;
    document.getElementById('subtotal_'+i).value=subtotal.toFixed(2);
    total+=subtotal;
  }    
  document.getElementById("total").value=total.toFixed(2);
}
window.onload=function() {
  for (var i=0,n=document.querySelectorAll(".multipp").length; i<n;i++) {
    document.getElementById('quantity_'+i).onkeyup=getTotal;
  }
  getTotal();
}
&#13;
&#13;
&#13;

PHP:

<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>
  <!-- here you loop in your PHP from 0 to 9 if you want 10 fields -->
<tr class="multipp">
<td><input type="text" name="description_0" id="description_'" size="85" maxlength="70" value="desc 0" /></td>
<td><input type="text" name="priceper_0" id="priceper_0" size="10" maxlength="9" value="11" /></td>
<td><input type="text" name="per_pack_0" id="per_pack_0" size="10" maxlength="9" value="1" /></td>
<td><input type="text" name="quantity_0" id="quantity_0" size="10" maxlength="9" value="0"/></td>
<td><input type="text" name="subtotal_0" id="subtotal_0" size="15" maxlength="9" value="0.00" /></td>
</tr>
<tr class="multipp">
<td><input type="text" name="description_1" id="description_1" size="85" maxlength="70" value="desc 1" /></td>
<td><input type="text" name="priceper_1" id="priceper_1" size="10" maxlength="9" value="22" /></td>
<td><input type="text" name="per_pack_1" id="per_pack_1" size="10" maxlength="9" value="2" /></td>
<td><input type="text" name="quantity_1" id="quantity_1" size="10" maxlength="9" value="0"/></td>
<td><input type="text" name="subtotal_1" id="subtotal_1" size="15" maxlength="9" value="0.00" /></td>
</tr>
<tr><td colspan=4>&nbsp;</td><td><input type="text" id="total" value="0.00" />
</table>