Jquery group by td with same class

Question

I have the current table data:

<table>     
<tr class="Violão">
    <td>Violão</td>
    <td class="td2 8">8</td>
</tr>
<tr class="Violão">
    <td>Violão</td>
    <td class="td2 23">23</td>
</tr>
<tr class="Guitarra">
    <td>Guitarra</td>
    <td class="td2 16">16</td>
</tr>
</table>

What I want to do is groupby the TDs which are the same, and sum the values on the second td to get the total. With that in mind I´ve put the name of the product to be a class on the TR (don't know if it is needed)

and I've coded the current javascript:

$(".groupWrapper").each(function() {
              var total = 0;
              $(this).find(".td2").each(function() {

                total += parseInt($(this).text());
              });
              $(this).append($("<td></td>").text('Total: ' + total));
            });

by the way the current java scripr doesn't groupby.

Now i'm lost, I don't know what else I can do, or if there is a pluging that does what I want.

where is `.groupWrapper` class in your above html code? – Ahsan Dec 23 '11 at 13:30 — Ahsan, Dec 23 '11 at 13:30

score 2 · Answer 1 · edited May 23 '17 at 12:22

</tr class="Violão"> This doesn't make sense. You only close the tag: </tr>. And I'm assuming you know that since the rest of your code is proper (except for your classnames. Check this question out).
If you want to add the values of each <td> with a class of td2, see below.

Try this jQuery:

var sum = 0;
$(".td2").each(function(){
    sum = sum + $(this).text();
});

This should add each number within the tds to the variable sum.

score 2 · Answer 2 · answered Dec 23 '11 at 13:30

<table>     
<tr class="Violão">
    <td>Violão</td>
    <td class="td2 8">8</td>
</tr>
<tr class="Violão">
    <td>Violão</td>
    <td class="td2 23">23</td>
</tr class="Violão">
<tr class="Guitarra">
    <td>Guitarra</td>
    <td class="td2 16">16</td>
</tr>
</table>

var dictionary = {};

$("td").each(function(){
   if(!dictionary[$(this).attr("class"))
      dictionary[$(this).attr("class")] = 0;
   dictionary[$(this).attr("class")] += parseInt($(this).html());
});

score 2 · Answer 3 · answered Dec 23 '11 at 13:39

// declare an array to hold unique class names
var dictionary = [];

// Cycle through the table rows
$("table tr").each(function() {
    var thisName = $(this).attr("class");
    // Add them to the array if they aren't in it.
    if ($.inArray(thisName, dictionary) == -1) {
        dictionary.push(thisName);
    }
});

// Cycle through the array
for(var obj in dictionary) {
    var className = dictionary[obj];
    var total = 0;
    // Cycle through all tr's with the current class, get the amount from each, add them to the total
    $("table tr." + className).each(function() {
        total += parseInt($(this).children(".td2").text());
    });
    // Append a td with the total.
    $("table tr." + className).append("<td>Total: " + total + "</td>");
}

Fiddler (on the roof): http://jsfiddle.net/ABRsj/

This is much better as it's matching for ANY class names on the table, although I think we could improve the JS a bit but it is certainly more complete example. — Phunky, Dec 23 '11 at 13:42

helle · Answer 4 · 2011-12-23T13:51:51.370

assuming the tr only has one class given!

var sums = [];
$('.td2').each(function(){
    var val = $(this).text();
    var parentClass = $(this).parent().attr('class');
    if(sums[parentClass] != undefined) sums[parentClass] +=parseFloat(val);
    else sums[parentClass] = parseFloat(val);
});
for(var key in sums){
    $('<tr><td>Total ('+key+')</td><td>'+sums[key]+'</td></tr>').appendTo($('table'));
}

I would give the table some ID and change to appendTo($('#<thID>'))

score 0 · Answer 5 · answered Dec 23 '11 at 13:39

0

The solution: http://jsfiddle.net/sLysV/2/

answered Dec 23 '11 at 13:39

Rishabh

1,185
1
12
28

I think you misunderstood the question - He needs a total for each type of instrument, not a cumulative total. – Andreas Eriksson Dec 23 '11 at 13:41

score 0 · Answer 6 · answered Dec 23 '11 at 13:39

First stick and ID on the table and select that first with jQuery as matching an ID is always the most efficient.

Then all you need to do is match the class, parse the string to a number and add them up. I've created a simple example for you below

http://jsfiddle.net/Phunky/Vng7F/

But what you didn't make clear is how your expecting to get the value of the td class, if this is dynamic and can change you could make it much more versatile but hopefully this will give you a bit of understanding about where to go from here.

Jquery group by td with same class

6 Answers6