Javascript 基于分组的和表值

我有下表：

<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

而言，总数为123+486<代码>第2类仅为356。如果有更多的类别，等等

---

我更喜欢纯javascript解决方案，但如果不可能，JQuery也可以获取所有

集合，然后需要循环遍历它们以获取它们的

innerText

属性，稍后可以对这些属性进行求和以获得总和

这是工作小提琴：

HTML

<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>

类别
价值
第一类
123
第二类
356
第一类
486
全部的

Javascript

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;

var-tds=document.getElementsByTagName（“td”）；
var合计=0；
对于（var i=0；i如果我理解正确，则重复每个
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）；
如果（总计[类别]）{
总计[cat]+=val；
}
否则{
总计[cat]=val；
}
});
console.log（总计）；

类别
价值
第一类
123
第二类
356
第一类
486
如果您感兴趣，这里有一个使用jQuery:）的解决方案。这很简单


var sumCat1=0；
var sumCat2=0；
$（“.cat1+.value”）。每个（函数（）{
sumCat1+=parseInt（$（this.text（））；
})
$（“.cat2+.value”）。每个（函数（）{
sumCat2+=parseInt（$（this.text（））；
})
console.log（sumCat1）
console.log（sumCat2）

类别
价值
第一类
123
第二类
356
第一类
486
JQuery中的一种简单方法

var obj={}；
$（'tr'）。每个（函数（）{
$this=$（this）
如果（$this.length）{
var cat=$（this.find（“td”）.first（）.html（）；
var val=$（this.find（“td”）.last（）.html（）；
如果（cat）{
如果（！obj[cat]）{
obj[cat]=parseInt（val）；
}否则{
obj[cat]+=parseInt（val）；
}
}
}
})
控制台日志（obj）
这里有一个只使用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);
}

//抓取数据
var allTR=document.getElementsByTagName（'TR'）；
var result={}；
//循环表行
对于（var i=0；i）你所说的“添加”是什么意思？添加到什么？期望的结果是什么？为清晰起见编辑的问题。希望现在有意义？
//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);
}