Javascript 对关联数组键值求和并按键对其分组

我的表格如下：

<table>
   <thead>
      <th>PRODUCT</th>
      <th>QUANTITY</th>
      <th>AREA</th>
      <th>PRICE</th>
      <th>TOTAL</th>
   <tr>
      <td id="name">SWEETS</td>
      <td id="qty">10</td>
      <td id="area">250</td>
      <td id="price">16.50</td>
      <td id="total">160.50</td>
   </tr>
   <tr>
      <td id="name"">DRY FOODS</td>
      <td id="qty">5</td>
      <td id="area">100</td>
      <td id="price">10.25</td>
      <td id="total">51.25</td>
   </tr>
   <tr>
      <td id="name">FRESH</td>
      <td id="qty">20</td>
      <td id="area">250</td>
      <td id="price">5</td>
      <td id="total">100</td>
   </tr>
   <tr>
      <td id="name">MEAT</td>
      <td id="qty">10</td>
      <td id="area">250</td>
      <td id="price">15</td>
      <td id="total">150</td>
   </tr>
   <tr>
      <td id="name">FROZEN</td>
      <td id="qty">20</td>
      <td id="area">300</td>
      <td id="price">10</td>
      <td id="total">200</td>
   </tr>
</table>

---

您能告诉我如何处理这个问题吗？

您需要将id值更改为其他属性，例如class

---

在行上循环（使用tbody元素跳过标题）并从元素中收集值以及您所关注的类。您需要使用数组来存储它们，因为您无法对对象的属性进行排序，并且每个属性必须具有唯一的名称。

您需要将id值更改为其他属性，例如类

---

在行上循环（使用tbody元素跳过标题）并从元素中收集值以及您所关注的类。您将需要使用数组来存储它们，因为您无法对对象的属性进行排序，并且每个属性必须具有唯一的名称。

id应该是唯一的。因此，将

250

更改为

250

然后打电话：

o = {};
$("td.area").each(function(){ 
 key = o[$(this).text()];
 if (!key) key = 0;
 key += parseFloat( $(this).closest("tr").find(".total").text());
});

---

然后你有一个对象包含键值[键值=区号，值=总数]

id应该是唯一的。因此，将

250

更改为

250

然后打电话：

o = {};
$("td.area").each(function(){ 
 key = o[$(this).text()];
 if (!key) key = 0;
 key += parseFloat( $(this).closest("tr").find(".total").text());
});

---

然后您有一个包含键值的对象[key=area code，value=total]

这个JSFIDLE应该可以解决您的问题。我还修复了您丢失的thead、您在DRY FOODS td中的双引号，以及将id更改为类：

---

这个JSFiddle应该可以解决您的问题。我还修复了您丢失的thead、您在DRY FOODS td中的双引号，以及将id更改为类：

---

您忘记关闭

-tag@StefanFandler-的结束标记是可选的。但是标记无效，因为AD只能将tr作为子元素。您忘记关闭

-tag@StefanFandler-的结束标记是可选的。但是标记无效，因为thead只能将tr作为子元素。更正：理想情况下，id应该是唯一的，但它们不必是唯一的。这一点在当今浏览器的宽容中显而易见。像$el.find（#someid”）这样的范围查询确实有效，即使ID不是唯一的。这是一个很好的解决方案，但请将

$（this.text（）

的结果存储在局部变量中。记住使用

parseFloat

而不是

parseInt

，因为OP有浮点数。更正：ID最好是唯一的，但它们不必是唯一的。这一点在当今浏览器的宽容中显而易见。像$el.find（#someid”）这样的作用域查询确实有效，即使ID不是唯一的。这是一个很好的解决方案，但请将

$（this.text（）

的结果存储在局部变量中。记住使用

parseFloat

而不是

parseInt

，因为OP有浮点数。如果页面中有多个表，我还有一个问题，我们如何在

$（“tr”）

函数中传递此表？您只需给表一个类（或ID）并使用选择器

$（“#mytable tr”）

。这里有一个JSFIDLE演示：我还有一个问题，如果页面中有多个表，我们如何在

$（“tr”）

函数中传递这个表？您只需给表一个类（或ID）并使用选择器

$（“#mytable tr”）

。下面是一个要演示的JSFIDLE：

var areas = {};
$("tr").each(function() {
    var area = $(this).find("td.area").text();
    if (area != "") {
        var total = parseFloat($(this).find("td.total").text());
        if (!areas.hasOwnProperty(area)) {
            areas[area] = 0;            
        }
        areas[area] += total;
    }
});
console.log(areas);