通过javascript / jquery从html表中获取值并进行计算 [英] getting values from a html table via javascript/jquery and doing a calculation
问题描述
我有一个包含4列（名称，价格，数量，价值）的html表格。数量字段有一个输入标签。基本上有人在数量字段中输入一个数字，然后点击一个按钮，脚本应将每行中的价格和数量单元格相乘，并将其写入相应的值单元格中。然后，它应该最终添加所有的值，然后将它写在表后。
看起来很简单，但我无法从javascript / jquery文档中找出它。 / p>
这是我的html代码：
< form>
< tbody>
< tr>
< td valign =topwidth =154>矿石< / td>
< td valign =topwidth =53>单位价格< / td>
< td valign =topwidth =93>数量< / td>
< td valign =topwidth =100>值< / td>< / tr>
< tr>
< td valign =topwidth =154>< strong> Arkonor< / strong>< / td>
< td id =11valign =topwidth =53> 1< / td>
< td valign =topwidth =93>< input name =12>< / td>
< td id =13valign =topwidth =100>& nbsp;< / td>< / tr>
//获得更多的这些行...所有价格行最后都有一个ID为1的ID，即21,31,41 ,. ....，
//所有文本输入在名称末尾都有一个2，所有值的末尾都有一个3。
< / tbody>< / table>< / form>
< p id =result>您的值是：< / p>
< button type =button>计算< /按钮>
我已经为您在jsfildde <一个href =http://jsfiddle.net/BLYBx/ =nofollow>这里。
注意我清理了你的html 。
你必须做额外的工作来检查无效输入等，但你应该明白。
Html：
< table border =0cellspacing =0cellpadding =2width = 400id =mineraltable>
< thead>
< tr>
< td valign =topwidth =154>矿石< / td>
< td valign =topwidth =53>单位价格< / td>
< td valign =topwidth =93>数量< / td>
< td valign =topwidth =100>值< / td>< / tr>
< tr>
< / thead>
< tbody>
< td valign =topwidth =154>< strong> Arkonor< / strong>< / td>
< td class =priceid =11valign =topwidth =53> 1< / td>
< td class =quantityvalign =topwidth =93>< input name =12value =1>< / td>
< td class =valueid =13valign =topwidth =100>& nbsp;< / td>
< / tr>
< / tbody>
< / table>
< p id =result>您的值是：< / p>
< button type =button>计算< /按钮>
Javascript ：
$（'button'）。click（function（）{
var total = 0;
$（'＃mineraltable tbody tr'）。each（function（index）{
var price = parseInt（$（this）.find（'。price'）。text ））;
var quantity = parseInt（$（this）.find（'。quantity input'）。val（））;
var value = $（this）.find（'。value'） ;
var subTotal = price * quantity;
value.text（subTotal）;
total = total + subTotal;
}）;
'（'＃result'）。text（'Your value is：'+ total）;
}）;
Problem: I have a html table with 4 columns (Name, Price, Quantity, Value). The Quantity field has an input tag. Basically someone writes the a number in the quantity field and then hits a button and the script should multiply the Price and Quantity cell in each row and write it in the respective value cell. Then it should finally add all the Values and then write it after the table.
Seems simple enough but I can't figure it out from the javascript / jquery documentation.
this is my html code:
<form>
<table border="0" cellspacing="0" cellpadding="2" width="400" id="mineraltable">
<tbody>
<tr>
<td valign="top" width="154">Ore</td>
<td valign="top" width="53">Price Per Unit</td>
<td valign="top" width="93">Quantity</td>
<td valign="top" width="100">Value</td></tr>
<tr>
<td valign="top" width="154"><strong>Arkonor</strong></td>
<td id="11" valign="top" width="53">1</td>
<td valign="top" width="93"><input name="12"></td>
<td id="13" valign="top" width="100"> </td></tr>
//Lots more of these rows... all Price rows have an ID with a 1 at the end, i.e. 21, 31, 41,. ....,
//all the text inputs have a 2 at the end of the name, and all Values have a 3 at the end.
</tbody></table></form>
<p id="result">Your value is: </p>
<button type="button">Calculate</button>
I have done a basic solution for you on jsfildde here.
Note I cleaned up your html a bit.
And you will have to do additional work to check for invalid inputs etc. but you should get the idea.
Html:
<table border="0" cellspacing="0" cellpadding="2" width="400" id="mineraltable">
<thead>
<tr>
<td valign="top" width="154">Ore</td>
<td valign="top" width="53">Price Per Unit</td>
<td valign="top" width="93">Quantity</td>
<td valign="top" width="100">Value</td></tr>
<tr>
</thead>
<tbody>
<td valign="top" width="154"><strong>Arkonor</strong></td>
<td class="price" id="11" valign="top" width="53">1</td>
<td class="quantity" valign="top" width="93"><input name="12" value="1"></td>
<td class="value" id="13" valign="top" width="100"> </td>
</tr>
</tbody>
</table>
<p id="result">Your value is: </p>
<button type="button">Calculate</button>
Javascript:
$('button').click(function() {
var total = 0;
$('#mineraltable tbody tr').each(function(index) {
var price = parseInt($(this).find('.price').text());
var quantity = parseInt($(this).find('.quantity input').val());
var value = $(this).find('.value');
var subTotal = price * quantity;
value.text(subTotal);
total = total + subTotal;
});
$('#result').text('Your value is: '+total);
});
这篇关于通过javascript / jquery从html表中获取值并进行计算的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
