和表格中值的分組

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)