CODEWITHSUNDEEP
javascriptphpjqueryhtmlsql
h3tr1ck
h3tr1ck

Reputation: 909

HTML Table JQuery automated hour totals

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">In</td>
    <td align="left" class="job_code">2400-Duffy's</td>
    <td align="left" class="hrs">4</td>
<tr class = "display-odd-row">
    <td align="left" style="color:#009900">In</td>
    <td align="left" class="job_code">1500-Orchard</td>
    <td align="left" class="hrs">2</td>
<tr class = "display-even-row">
    <td align="left" style="color:#000099">In</td>
    <td align="left" class="job_code">32-Black</td>
    <td align="left" class="hrs">1</td>
<tr class = "display-odd-row">
    <td align="left" style="color:#009900">In</td>
    <td align="left" class="job_code">1500-Orchard</td>
    <td align="left" class="hrs">4</td>
</div>

I want to total the "hrs" class for automatically with a JQuery for each job_code class. The JQuery I have for this is:

var sum=0

$(".hrs").each(function(i) {
    $.each(".job_code") {
    sum = sum + parseInt($(this).text());
    }

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

Unfortunately, the above JQuery doesn't work correctly. I need it to just run through the job_classes and total the similar ones up. So it should display something like the following:

Total 2400-Duffy hours = 4
Total 1500-Orchard hours = 6
Total 32-Black hours = 1

Any help or suggestions are greatly appreciated. Thanks.

Upvotes: 0

Views: 266

Answers (3)

Rajaprabhu Aravindasamy
Rajaprabhu Aravindasamy

Reputation: 67207

Try,

$('<div/>', {
    'id': 'test'
}).appendTo('body');

$('.job_code').each(function () {
    var xText = this.textContent;
    var xHrs = $(this).next()[0].textContent;
    var targetSpan = $('#test').find('span[test="' + xText + '"]');
    if (targetSpan.length) {
        targetSpan.contents()[1].nodeValue = " " + (parseInt(targetSpan.contents()[1].nodeValue, 10) + parseInt(xHrs, 10));
    } else {
        $('<span/>', {
            'test': xText,
            'text': " " + xHrs
        }).appendTo($('#test')).prepend($('<span/>', {
            'text': xText
        })).after('<br/>');
    }
});

DEMO

Upvotes: 0

user1978142
user1978142

Reputation: 7948

To get the values, you may need to use $.each() to sum all the values. First, you need to get all the job codes (so that i can be dynamic, as in the future some job codes may be added), then after gathering, remove the duplicates, then sum them up. Consider this quick dirty example:

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

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

    var temp = [];
    $('.job_code').each(function(index, element){
        var text = $(this).text();
        temp.push(text);
    });

    // remove duplicates
    var job_code = [];
    $.each(temp, function(index, element){
        if($.inArray(element, job_code) === -1) job_code.push(element);
    });

    var sum = {};
    $.each(job_code, function(index, element){
        var total = 0;
        $('.job_code:contains('+element+')').each(function(key, value){
            total += parseInt($(this).next('td.hrs').text());
            sum[index] = {'job_code' : element, 'total': total};
        });
    });

    console.log(sum);

});
</script>

Sample Fiddle link here.

Upvotes: 2

Balachandran
Balachandran

Reputation: 9637

working demo

Try it..as Your requirement is based on the name to sum the value

 var Duffy  = 0;
    var Orchars = 0;
    var Black=0;
    $(".hrs").each(function(i){

        var value=$(this).prev("td").text();
       var name= value.split("-");


    if (name[1] == "Duffy's"){

            Duffy = Duffy + parseInt($(this).text())
        }else if (name[1] == 'Orchard' ){
            Orchars = Orchars + parseInt($(this).text());

        }else if (name[1] == 'Black' ){
            Black = Black + parseInt($(this).text())
        } 



    });
      alert("Duffy"+Duffy+"  Orchars"+Orchars+"  Black"+Black);

Upvotes: 0

Related Questions