Question

我有几个表如下所示：

<table id="table1">
<tr>
    <th>Item</th>
    <th>Price</th>
</tr>
<tr>
    <td>Item 1</a></td>
    <td><input type="text" name="sum1" id="sum1" /></td>
</tr>
<tr>
    <td>Item 2</a></td>
    <td><input type="text" name="sum2" id="sum2" /></td>
</tr>
<tr>
    <td>Item 3</td>
    <td><input type="text" name="sum3" id="sum3" /></td>
</tr>
<tr>
    <td>&nbsp;</td>
    <td>Total:</td>
    <td>$total </td>
</tr>
</table>



<table id="table2">
<tr>
    <th>Item</th>
    <th>Price</th>
</tr>
<tr>
    <td>Item 1</a></td>
    <td><input type="text" name="sum1" id="sum1" /></td>
</tr>
<tr>
    <td>Item 2</a></td>
    <td><input type="text" name="sum2" id="sum2" /></td>
</tr>
<tr>
    <td>Item 3</td>
    <td><input type="text" name="sum3" id="sum3" /></td>
</tr>
<tr>
    <td>Item 4</td>
    <td><input type="text" name="sum4" id="sum4" /></td>
</tr>
<tr>
    <td>&nbsp;</td>
    <td>Total:</td>
    <td>$total</td>
</tr>
</table>

是否有人知道是否有可能对每个输入的项目价格求和（单独为table1，table2等...）最后打印所有项目的项目总和？

Answer 1

你需要像jQuery这样的dom操纵器或简单的javascript。我会给田地上一堂课，让它更容易 - 比方说，“总和”。然后你可以从父表中获取所有子项“sum”。将它们的值解析为int并添加。还不错。

Here's a working JS fiddle example

Answer 2

使用jquery这应该很容易，假设你可以为每个输入添加一个名为“line-item”的类名，并且对于应该显示计算总和的单元格的类名“total”，你可以

function calculateSum(tableId){
 var sum = 0;
 $(tableId + ' .line-item').each(function(){
   var value = parseFloat($(this).val().trim());
   if(value){
    sum += parseFloat($(this).val());
   }
 });
 $(tableId + ' .total').html(sum);
}

并使用您想要的表的id调用此函数。

如果你不能添加一个类名，那么即使只有一个位，也不会得到任何一个，但是在.line-item尝试只放置input而不是它，它应该在这个场景中完成。您可以写tr:last-child td:nth-child(2)

而不是.total

更新：添加“parseInt”以避免字符串连接

Answer 3

更好的方法是不要使用类似的ID调用不同的元素，这是无效的方式。但即便如此 - 您只需使用此表中的输入即可对每个表执行计算。

算法：

您为所有＆lt; table＆gt;运行循环标签。
对于每个＆lt; table＆gt;标记您找到所有＆lt; input＆gt; s（无论他们拥有什么ID）;
计算当前表的所有输入的总和。

您可以使用JavaScript执行此操作，但jQuery更适合您。

但是：不要调用具有相似ID的HTML DOM元素。这是错的!!!

输入计算

3 个答案: