基于分组

Question

我有下表：

<table>
    <tr>
        <th>Category</th>
        <th>Value</th>
    </tr>
    <tr>
        <td class="cat1">cat1</td>
        <td class="value">123</td>
    </tr>
    <tr>
        <td class="cat2">cat2</td>
        <td class="value">356</td>
    </tr>
    <tr>
        <td class="cat1">cat1</td>
        <td class="value">486</td>
    </tr>
</table>

我需要一种方法来添加/求和按类别分组的所有值，即：在cat1中添加/求和所有值，然后在cat2中添加/求和所有值。对于每个小组，我将对总数做一些事情。

所以我希望有类似的东西：

for each unique category:
    sum values in category
    do something with this category total

对于cat1，总数将 123 + 486 。 Cat2只会 356 。如果有更多类别，依此类推。

我更喜欢纯粹的javascript解决方案，但如果不可能，JQuery会这样做。

Answer 1

如果我理解正确，你会重复每个td:first-child（类别单元格）。

创建一个total对象。您可以检查每个单元格中是否存在类别。如果是，请将当前值添加到存储的值。如果没有，请向其插入新属性。

像这样：

var total = {};

[].forEach.call(document.querySelectorAll('td:first-child'), function(td) {
  var cat = td.getAttribute('class'),
      val = parseInt(td.nextElementSibling.innerHTML);
  
  if (total[cat]) {
    total[cat] += val;  
  }
  else {
    total[cat] = val;  
  }
});

console.log(total);

<table>
  <tr>
    <th>Category</th>
    <th>Value</th>
  </tr>
  <tr>
    <td class="cat1">cat1</td>
    <td class="value">123</td>
  </tr>
  <tr>
    <td class="cat2">cat2</td>
    <td class="value">356</td>
  </tr>
  <tr>
    <td class="cat1">cat1</td>
    <td class="value">486</td>
  </tr>
</table>

Answer 2

您必须使用<td>来获取所有innerText集合，然后您需要循环遍历它们以获取其<table id="tbl1"> <tr> <th>Category</th> <th>Value</th> </tr> <tr> <td class="cat1">cat1</td> <td class="value">123</td> </tr> <tr> <td class="cat2">cat2</td> <td class="value">356</td> </tr> <tr> <td class="cat1">cat1</td> <td class="value">486</td> </tr> <tr> <td class="total"><b>Total</b></td> <td class="totalValue"></td> </tr> </table> 属性，以后可以将其汇总以获得求和。

这是工作小提琴：https://jsfiddle.net/ftordw4L/1/

<强> HTML

var tds=document.getElementsByTagName("td");
var total=0;


for (var i = 0; i<tds.length; i++) {

  if (tds[i].className == "value") {
    if(total==0) {
        total = parseInt(tds[i].innerText);
    } else {
        total = total + parseInt(tds[i].innerText);
    }
  }
}

document.getElementsByClassName('totalValue')[0].innerHTML = total;

<强>的Javascript

{{1}}

希望这有帮助！

Answer 3

这是一个只使用javascript的简单方法

//grab data
var allTR = document.getElementsByTagName('TR');

var result = {};

//cycle table rows
for(var i=0;i<allTR.length;i+2){
    //read class and value object data
    var class = allTR[i].getAttribute('class');
    var value = allTR[i+1].innerText;

    //check if exists and add, or just add
    if(result[class])
       result[class] += parseInt(value);
    else
       result[class] = parseInt(value);
}

Answer 4

如果你有兴趣，

这是jQuery的解决方案:)这很简单

var sumCat1 = 0;
var sumCat2 = 0;
    $(".cat1 + .value").each(function(){
         sumCat1 += parseInt($(this).text());  
    })
    $(".cat2 + .value").each(function(){
         sumCat2 += parseInt($(this).text());  
    })
    
console.log(sumCat1)
console.log(sumCat2)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr>
        <th>Category</th>
        <th>Value</th>
    </tr>
    <tr>
        <td class="cat1">cat1</td>
        <td class="value">123</td>
    </tr>
    <tr>
        <td class="cat2">cat2</td>
        <td class="value">356</td>
    </tr>
    <tr>
        <td class="cat1">cat1</td>
        <td class="value">486</td>
    </tr>
</table>

Answer 5

JQuery中的一个简单方法......

var obj = {};

$('tr').each(function() {
  $this = $(this)
  if ($this.length) {
    var cat = $(this).find("td").first().html();
    var val = $(this).find("td").last().html();

    if (cat) {
      if (!obj[cat]) {      
        obj[cat] = parseInt(val);
      } else {
        obj[cat] += parseInt(val);
      }
    }
  }
})

console.log(obj)