我有一张发票,我必须使用
jquery在文本框中计算一些值.
在我的发票中有数量文本框,
if users enters the quantity then dynamically it should show the
calculated price i.e(total_subPrice= unit_price * quantity)in
another textBox called “price”.
并且所有价格的总和应该在按钮中显示为总计.
请检查我的下面的HTML代码并在浏览器中运行它然后你将完全理解我的问题.
<html>
<body>
<form name="invoice form" action="saveToDatabase.java">
<table border="1" height="30%" width="30%">
<tr>
<td align="center" colspan="5">Customer Invoice</td>
</tr>
<tr>
<td width="5%" bgcolor="#CCCCCC">Sn.no.</td>
<td width="25%" bgcolor="#CCCCCC">Item</td>
<td width="25%" bgcolor="#CCCCCC">Unit Price(In $)</td>
<td width="20%" bgcolor="#CCCCCC">Quantity</td>
<td width="25%" bgcolor="#CCCCCC">Line Total<br/>(Price * Qnty)</td>
</tr>
<tr>
<td width="5%">1</td>
<td width="25%">Iphone 5S</td>
<td width="25%"><input type="text" value="400" name="unitprice1" size="4" disabled></td>
<td width="20%"><input type="text" name="quantity1" value="2" size="2"/></td>
<td width="25%"><input type="text" name="price1" value="400" size="4"/></td>
</tr>
<tr>
<td width="5%">2</td>
<td width="25%">Ipad 2</td>
<td width="25%"><input type="text" value="700" name="unitprice2" size="4" disabled></td>
<td width="20%"><input type="text" name="quantity2" value="1" size="2"/></td>
<td width="25%"><input type="text" name="price2=" value="700" size="4"/></td>
</tr>
<tr>
<td width="5%">1</td>
<td width="25%">mp3</td>
<td width="25%"><input type="text" value="50" name="unitprice1" size="4" disabled></td>
<td width="20%"><input type="text" name="quantity1" value="3" size="2"/></td>
<td width="25%"><input type="text" name="price1" value="150" size="4"/></td>
</tr>
<tr>
<td align="right" colspan="5">Total<input type="text" name="subtotal" value="1250" size="12" disabled/></td>
</tr>
</table>
</form></body>
</html>
解决方法
我喜欢看到实际的例子来自己学习jQuery这样的东西,所以我为你的问题做了一个例子,这样你就可以看到它是如何工作的：
http://jsfiddle.net/bozdoz/LGyeq/
逐行：
$('input').change(function(){
创建一个变量来存储总计,以计算小计：
var linetotals = 0;
使用类’lineTotal’选择每个元素(我添加了它,以便我们可以选择它们)：
$('.lineTotal').each(function(){
通过在同一个tr元素中找到输入元素来获得价格和数量(eq(#)分别获得第一个和第二个元素)：
price = $(this).parents('tr').find('input').eq(0).val();
quantity = $(this).parents('tr').find('input').eq(1).val();
将lineTotal类元素设置为新的total,并将total添加到lineTotals变量：
$(this).val(price*quantity); linetotals += price*quantity;
});
将小计设置为linetotals变量的值：
$('#total').val(linetotals);
});
这是你可以做到的一种方式.它与偏好有很大关系.希望这是一个好的开始.
更新
Re：Askers新请求更通用的代码
使用CSS属性选择器选择输入字段. JSFiddle使用以下代码更新：
$('input').change(function(){
var linetotals = 0;
$('[name^="price"]').each(function(){
price = $(this).parents('tr').find('input').eq(0).val();
quantity = $(this).parents('tr').find('input').eq(1).val();
$(this).val(price*quantity);
linetotals += price*quantity;
});
$('[name=subtotal]').val(linetotals);
});
