如何动态地计算出在文本框的值 [英] how to dynamically calculate value in the text box
问题描述
我有一个发票的在那里我使用jQuery来计算在文本框中一定的价值。
我不知道很多关于jQuery的。请帮我解决这个问题。
在我的发票有数量文本框，
如果用户进入量，然后动态地应该展现 计算的价格即
（total_subPrice = UNIT_PRICE *量）的 另一个文本框被称为天价。
和再次的所有的价格的总和应该是在按钮作为总可见。
请检查我下面的html code和在浏览器中运行它，那么你就会完全明白我的问题。
＆LT; HTML＆GT;
＆LT;身体GT;
＆LT;表格名称=发票联行动=saveToDatabase.java＆GT;
＆LT;表格边框=1高度=30％WIDTH =30％＆GT;
＆其中; TR＆GT;
＆LT; TD ALIGN =中心合并单元格=5＆GT;客户发票＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆其中; TR＆GT;
＆所述; TD宽度=10％BGCOLOR =＃CCCCCC＆GT; Sn.no.＆所述; / TD＆GT;
＆所述; TD宽度=25％BGCOLOR =＃CCCCCC＆GT;项目＆lt; / TD＆GT;
＆LT; TD宽度=25％BGCOLOR =＃CCCCCC＆GT;单价（在$）＆LT; / TD＆GT;
＆LT; TD宽度=20％BGCOLOR =＃CCCCCC＆GT;数量＆LT; / TD＆GT;
＆LT; TD宽度=25％BGCOLOR =＃CCCCCC＆GT;行总计＆LT; BR /＆GT;（价格* Qnty）＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆其中; TR＆GT;
＆所述; TD宽度=10％→1＆其中; / TD＆GT;
＆LT; TD宽度=25％＆GT; iPhone 5S＆LT; / TD＆GT;
＆LT; TD宽度=25％＆GT;＆LT;输入类型=文字值=400NAME =unitprice1大小=4已禁用＆GT;＆LT; / TD＆GT;
＆LT; TD宽度=20％＆GT;＆LT;输入类型=文本名称=数量1值=2大小=2/＆GT;＆LT; / TD＆GT;
＆LT; TD宽度=25％＆GT;＆LT;输入类型=文本名称=价格1值=400大小=4/＆GT;＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆其中; TR＆GT;
＆所述; TD宽度=10％→2＆其中; / TD＆GT;
＆LT; TD宽度=25％＆GT;的iPad 2版; / TD＆GT;
＆LT; TD宽度=25％＆GT;＆LT;输入类型=文字值=700NAME =unitprice2大小=4已禁用＆GT;＆LT; / TD＆GT;
＆LT; TD宽度=20％＆GT;＆LT;输入类型=文本名称=quantity2值=1大小=2/＆GT;＆LT; / TD＆GT;
＆LT; TD宽度=25％＆GT;＆LT;输入类型=文本名称=price2 =值=700大小=4/＆GT;＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆其中; TR＆GT;
＆所述; TD宽度=10％→1＆其中; / TD＆GT;
＆LT; TD宽度=25％＆GT; MP3＆LT; / TD＆GT;
＆LT; TD宽度=25％＆GT;＆LT;输入类型=文字值=50NAME =unitprice1大小=4已禁用＆GT;＆LT; / TD＆GT;
＆LT; TD宽度=20％＆GT;＆LT;输入类型=文本名称=数量1值=3大小=2/＆GT;＆LT; / TD＆GT;
＆LT; TD宽度=25％＆GT;＆LT;输入类型=文本名称=价格1值=150大小=4/＆GT;＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆其中; TR＆GT;
＆LT; TD ALIGN =正确的合并单元格=5个总＆LT;输入类型=文本名称=分类汇总值=1250大小=12已禁用/＆GT;＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆LT; /表＆gt;
＆LT; /形式GT;＆LT; /身体GT;
＆LT; / HTML＆GT;
我喜欢看到实际的例子来学习的东西，如jQuery的自己，所以我做出了表率您的问题，所以你可以看到它是如何工作的：的 http://jsfiddle.net/bozdoz/LGyeq/
逐行：
选择所有的输入标签，并调用一个函数，如果他们改变了：
$（'输入'）。改变（函数（）{
创建一个变量来存储汇总，计算出小计：
VAR linetotals = 0;
选择与类中的每个元素的lineTotal（这是我补充，这样我们就可以选择它们）：
$（'。lineTotal'）。每个（函数（）{
通过找到同一tr元素内的输入元件（当量（＃）分别获得第一和第二元件）获取价格及数量：
价格= $（本）。家长（TR）找到（输入），EQ（0）.VAL（）。
量= $（本）。家长（TR）找到（'输入'）方程（1）.VAL（）。
设置lineTotal类元素的新的总，总添加到lineTotals变量
$（本）.VAL（价格*数量）;
linetotals + =价格*数量;
}）;
将汇总到linetotals变量的值：
$（'＃总）VAL（linetotals）。
}）;
这是你可以做这件事。它有很多事情要做preference。希望这是一个良好的开端。
更新
回复：提问者对更广义的code的新要求
使用CSS属性选择器来选择输入字段。的jsfiddle与以下code更新：
$（'输入'）。改变（函数（）{
变种linetotals = 0;
$（'[^名字=价格]'）。每个（函数（）{
价格= $（本）。家长（TR）找到（输入），EQ（0）.VAL（）。
量= $（本）。家长（TR）找到（'输入'）方程（1）.VAL（）。
$（本）.VAL（价格*数量）;
linetotals + =价格*数量;
}）;
$（'[NAME =次全]）VAL（linetotals）。
}）;
i have a invoice where i have to calculate some value in the textbox using jquery.
I don't know much about Jquery. Please help me to solve this problem.
In my invoice there is quantity textbox,
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".
And again the total sum of all the price should be visible in the button as a Total.
please check my below html code and run it in browser then you will understand my problem exactly.
<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>
I enjoy seeing practical examples to learn stuff like jQuery myself, so I made an example for your problem so you can see how it works: http://jsfiddle.net/bozdoz/LGyeq/
Line by line:
Select all of the input tags and call a function if they are changed:
$('input').change(function(){
create a variable to store the totals, to calculate the subtotal:
var linetotals = 0;
select each element with class 'lineTotal' (which I added, so that we could select them):
$('.lineTotal').each(function(){
Get price and quantity by finding the input elements within the same tr element (eq(#) gets the first and second element respectively):
price = $(this).parents('tr').find('input').eq(0).val();
quantity = $(this).parents('tr').find('input').eq(1).val();
Set the lineTotal class element to the new total, and add the total to lineTotals variable:
$(this).val(price*quantity);
linetotals += price*quantity;
});
Set the subtotal to the value of the linetotals variable:
$('#total').val(linetotals);
});
This is one way you can do it. It has a lot to do with preference. Hope this is a good start.
Update
Re: Askers new request for more generalized code
Use CSS Attribute selectors to select the input fields. JSFiddle is updated with the following code:
$('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);
});
这篇关于如何动态地计算出在文本框的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
