HTML sum using JQuery

Question

So I have an HTML table displaying the results from a query. A sample of the table is as follows:

<div class="timecard">
<tr class = "display-even-row">
    <td align="left" style="color:#000099">2400-Duffy's</td>
    <td align="left" class="hrs">4</td>
<tr class = "display-odd-row">
    <td align="left" style="color:#009900">1500-Orchard</td>
    <td align="left" class="hrs">2</td>
</div>

I want to total the "hrs" class separately for the 2400-Duffy's records and the 1500-orchard records. The following is the JQuery statement I am trying to use.

var sum=0

$(".hrs").each(function(i) {
    if($('style') == 'color#000099') {
        sum = sum + parseInt($(this).text());
    }else if ($('style') == 'color#009900' {
        sum2 = sum + parseInt($(this).text());
});

$(".total").append("Total Duffy hours: " + sum);
$(".total").append("Total Orchard hours: " + sum2);

However, the above does not work properly and honestly I'm trying to automate it more as it has more that one "job code" than just the two listed above. Any suggestions would be great. thanks.

Mohebifar · Accepted Answer · 2014-05-17 05:24:30Z

1

If you want a more automated method, so create it !

$.fn.sum = function() {
    var sum=0;
    $(this).each(function() {
        sum += Number($(this).text().trim());
    });

    return sum;
}

Now use your function. Use class instead of style. For example duffy class must make the color not the style. write your arbitary selector and calculate sum.

var sum = $(".duffy .hours").sum();

answered May 17, 2014 at 5:24

Mohebifar

3,4111 gold badge26 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mark Richards · Accepted Answer · 2014-05-17 05:35:34Z

0

see this http://jsfiddle.net/MnJ35/1/ and use this code

var sum=0

$(".hrs").each(function(i) {
    if($(this).prev('td').css('color')=='rgb(0, 153, 0)') {
    sum = sum + parseInt($(this).text());
    }
});

$(".total").append("Total Duffy hours: " + sum);

edited May 17, 2014 at 5:35

answered May 17, 2014 at 5:26

Mark Richards

4341 gold badge9 silver badges24 bronze badges

1 Comment

h3tr1ck Over a year ago

Your suggestion does not include the other option seen above. This is important as the whole HTML table has multiple rows of those that will need to be totaled together so that if there are three Duffy's rows they are all added to show Total Duffy Hours = 6. Thanks.

Balachandran · Accepted Answer · 2014-05-17 06:24:44Z

0

Your html code is not valid .because of there is not table tag .

Working Demo

html Code

<div class="timecard">
    <table>
<tr class = "display-even-row">
    <td align="left" style="color:#000099">2400-Duffy's</td>
    <td align="left" class="hrs">4</td>
      </tr>
<tr class = "display-odd-row">
    <td align="left" style="color:#009900">1500-Orchard</td>
    <td align="left" class="hrs">2</td>
    </tr>
    </table>
</div>

JS

    var sum=0;
    var sum2=0;
    $(".hrs").each(function(i){

        var rgb=$(this).prev("td").css("color");
        var hxColor=hexc(rgb);

        if (hxColor == '#000099'){

            sum = sum + parseInt($(this).text())
        }else if (hxColor == '#009900' ){
            sum2 = sum2 + parseInt($(this).text());

        }

});

function hexc(colorval) {
    var parts = colorval.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
    delete(parts[0]);
    for (var i = 1; i <= 3; ++i) {
        parts[i] = parseInt(parts[i]).toString(16);
        if (parts[i].length == 1) parts[i] = '0' + parts[i];
    }
    color = '#' + parts.join('');

    return color;
}

edited May 17, 2014 at 6:24

answered May 17, 2014 at 5:39

Balachandran

9,6271 gold badge19 silver badges26 bronze badges

1 Comment

h3tr1ck Over a year ago

Thank you for your input. However, your code does not total up job codes if say another 4 hours at 1500-Orchard is added in another <td>. Is this possible?

Collectives™ on Stack Overflow

HTML sum using JQuery

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related