Dan*_*Dan 5 html javascript ajax jquery
我有一张发票,我必须使用jquery在文本框中计算一些值.
我对Jquery了解不多.请帮我解决这个问题.
在我的发票中有数量文本框,
如果用户输入数量然后动态,它应该显示计算的价格,即
(total_subPrice= unit_price * quantity)在另一个名为"价格"的文本框中.
并且所有价格的总和应该在按钮中显示为总计.
请检查我的下面的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/
\n\n逐行：
\n\n选择所有输入标签并在它们发生更改时调用函数：
\n\n$(\'input\').change(function(){\n创建一个变量来存储总计，以计算小计：
\n\nvar linetotals = 0;\n选择具有类“lineTotal”的每个元素（我添加了该类，以便我们可以选择它们）：
\n\n$(\'.lineTotal\').each(function(){\n通过查找同一 tr 元素中的输入元素来获取价格和数量（eq(#) 分别获取第一个和第二个元素）：
\n\nprice = $(this).parents(\'tr\').find(\'input\').eq(0).val();\nquantity = $(this).parents(\'tr\').find(\'input\').eq(1).val();\n将 lineTotal 类元素设置为新的总计，并将总计添加到 lineTotals 变量：
\n\n$(this).val(price*quantity);\nlinetotals += price*quantity;\n});
\n\n将小计设置为 linetotals 变量的值：
\n\n $(\'#total\').val(linetotals);\n});\xe2\x80\x8b\n这是您可以做到的一种方法。和喜好有很大关系。希望这是一个好的开始。
\n\n回复：询问者对更通用代码的新请求
\n\n使用 CSS 属性选择器选择输入字段。JSFiddle 已更新为以下代码：
\n\n$(\'input\').change(function(){\n var linetotals = 0;\n $(\'[name^="price"]\').each(function(){\n price = $(this).parents(\'tr\').find(\'input\').eq(0).val();\n quantity = $(this).parents(\'tr\').find(\'input\').eq(1).val();\n $(this).val(price*quantity);\n linetotals += price*quantity;\n });\n $(\'[name=subtotal]\').val(linetotals);\n});\xe2\x80\x8b\n| 归档时间： |
|
| 查看次数： |
3800 次 |
| 最近记录： |