通过javascript/jquery从html表中获取值并进行计算

问题: 我有一个包含4列（名称、价格、数量、值）的html表。“数量”字段有一个输入标记。基本上，有人在quantity字段中写入一个数字，然后点击一个按钮，脚本应该将每行中的Price和quantity单元格相乘，并将其写入相应的value单元格。然后，它应该最后添加所有值，然后将其写在表之后

看起来很简单，但我无法从javascript/jquery文档中理解它

这是我的html代码：

<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">&nbsp;</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>

矿石
单价
量
价值
Arkonor
1.
//更多的这些行。。。所有价格行都有一个ID，末尾有一个1，即21、31、41、。。。。，
//所有文本输入的名称末尾都有一个2，所有值的末尾都有一个3。
您的价值是：
算计

我已经在jsfildde上为您提供了一个基本的解决方案

注意我清理了一下你的html

你将不得不做额外的工作来检查无效的输入等，但你应该得到的想法

Html:

---

请将您的标题修改为除关键字列表以外的描述性内容。有人在数量字段->数量字段在哪里？每行有一个输入标记，除一件事外，其他一切都正常工作。“它显示：您的值为：NaN”。。。我不认为它会将所有不同的值单元格相加，记住有相当多的单元格，就像我说的，你需要添加一些输入验证，目前，值价格和数量必须是整数（0，1等），否则如果它不能将值解析为整数，它将抛出NaN。它们是一个整数。。。我已经将每个输入中的标准值设置为0，因此总和为0（0正确显示在每个值单元格中）。您是否像我在示例中那样将标题行放入了？天哪，我太笨了：）没有捕捉到这一点。它现在正在工作：）最后的锦上添花是如果你能给我一些代码，在值和结果字段中有1000个逗号分隔符。。。与1234567相同，而不是1234567

    <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">&nbsp;</td>
    </tr> 
</tbody>
    </table>
<p id="result">Your value is: </p>
<button type="button">Calculate</button>​

    $('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);
});​