和表格中值的分组

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只是。如果还有更多类别，那么等等。

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

Answer 1

这里的只用一个简单的方法的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 2

你必须使用getElementsByTagName("td");让所有的<td>集合，然后你需要通过他们循环来获取他们的innerText财产以后可以概括得到的总和。

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

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> 

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

希望这有助于！

Answer 3

如果我正确理解你，你会重复每个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 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)