3

我有几个表格，如下所示：

<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 等。）最后打印所有项目的项目总和？

4

3 回答 3

1

您将需要一个 dom 操纵器，如 jQuery 或简单的 javascript。我会给这些字段一个类，让它更容易——比如“sum”。然后您可以从父表中获取所有子“总和”。将它们的值解析为 int 并添加。还不错。

这是一个有效的 JS 小提琴示例

于 2012-05-13T14:10:33.223 回答
0

使用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 调用此函数。

如果你不能添加一个类名，这不会得到 tuffer 甚至一点点，但不是.line-item试图把 just input，它应该在这种情况下做的伎俩。而不是 .total 你可以写tr:last-child td:nth-child(2)

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

于 2012-05-13T14:13:30.923 回答
0

更好的方法是不要调用具有相似 ID 的不同元素，这是无效的方法。但即使是这样 - 您也可以简单地使用该表中的输入为每个表执行计算。

算法：

  1. 您为所有 <table> 标签运行循环。
  2. 对于每个 <table> 标签，您都可以找到所有 <input>（无论它们有什么 ID）；
  3. 计算当前表的所有输入的总和。

你可以用 JavaScript 做到这一点，但更适合你的是 jQuery。

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

于 2012-05-13T14:13:49.513 回答