JQuery dynamic for loop issue

Question

I have a table that has several tables in it for multiple users. These users can increase or decrease overtime, so I am trying to make it as dynamic as possible. I will attach two sample tables so you get the idea.

<div class="timecard">
 <h3>tommytest</h3>

<table class="misc_items timecard_list" border="0" cellpadding="2" cellspacing="0" style="margin:0 auto;">
    <tbody>
        <tr class="display_row odd">
            <td align="left" class="job_code" style="color:#000099">2400-Orchard</td>
            <td align="right">9:47am</td>
            <td align="right">5/19/2014</td>
            <td align="right" class="hrs">01:00</td>
        </tr>
        <tr class="display_odd row">
            <td align="left" class="job_code" style="color:#000099">1200-Duffy's</td>
            <td align="right">12:37am</td>
            <td align="right">5/17/2014</td>
            <td align="right" class="hrs">2:00</td>
        </tr>
    </tbody>
</table>
</div>
<div class="timecard">
 <h3>testtest</h3>

<table class="misc_items timecard_list" border="0" cellpadding="2" cellspacing="0" style="margin:0 auto;">
    <tbody>
        <tr class="display_row odd">
            <td align="left" class="job_code" style="color:#000099">2400-Orchard</td>
            <td align="right">9:47am</td>
            <td align="right">5/19/2014</td>
            <td align="right" class="hrs">01:00</td>
        </tr>
        <tr class="display_odd row">
            <td align="left" class="job_code" style="color:#000099">1200-Duffy's</td>
            <td align="right">12:37am</td>
            <td align="right">5/17/2014</td>
            <td align="right" class="hrs">2:00</td>
        </tr>
    </tbody>
</table>
</div>
<div id="total"></div>

I then have this JQuery script that takes the totals from the employees times at the different job codes and totals them up. The script itself is dynamic for each job code, but I am trying to make it dynamic so that it runs through the first table or user, outputs the totals and then does the same for the next tables, so on and so forth.

$(document).ready(function () {

var timeString = $(this).next('td.hrs').text();
var components = timeString.split(':');
var seconds = components[1] ? parseInt(components[1], 10) : 0;
var hrs = parseInt(components[0], 10) + seconds / 60;
total += hrs;

var temp = [];
$('.job_code').each(function (index, element) {
    var text = $(this).text();
    if (text != 'Out') {
        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) {
        var timeString = $(this).siblings('td.hrs').text();
        var components = timeString.split(':');
        var seconds = components[1] ? parseInt(components[1], 10) : 0;
        var hrs = parseInt(components[0], 10) + seconds / 60;
        total += hrs;
        sum[index] = {
            'job_code': element,
                'total': total
        };
    });
});

console.log(sum);

$.each(sum, function (index, element) {
    $('#total').append('<p>Total for ' + element.job_code + ': ' + element.total + '</p>');
});

});

Any advice would be greatly appreciated as I am just starting to use javascript and am quickly reaching the end of my capabilities. Here is a link to a sample JSfiddle

Thanks in advance

@SSS I tried a little bit of that, but I just posted the dynamic code I have working as I wanted some guidance before heading down the wrong path. — mgardner05
– mgardner05, Commented May 20, 2014 at 3:32
Just write the calculation code in a callback function and you are good to go. Invoke the function when content added dynamically — SSS
– SSS, Commented May 20, 2014 at 3:35
Your design does not seem to allow a per user/table total. How do you want to handler individual user totals? — PeterKA
– PeterKA, Commented May 20, 2014 at 3:42

Alex Shilman · Accepted Answer · 2014-05-20 14:37:02Z

1

Is this what you're looking for:

  function tfoot(total){
  var tfoot = ['<tfoot>',
         '<tr>',
         '<td colspan="3">Total</td>',
         '<td>'+total+'</td>',
         '</tr>',
         '</tfoot>'];
 return tfoot.join('/n');
 }

$('table').each(function(){
 var sum = 0;
 $(this).find('td.hrs').each(function(){
  sum+= +$(this).text().split(':')[0]
 });
 $(this).append(tfoot(sum));
});

DEMO

EDITTED:

 function toSeconds(s){
  var p = s.split(':');
  return parseInt(p[0], 10) * 3600 + parseInt(p[1], 10) * 60;
 }

function fill(s, digits) {
 s = s.toString();
 while (s.length < digits) s = '0' + s;
  return s;
 }

function addRows(obj){
 var rows='<tr><td colspan="4">Total:</td></tr>';
 for(var key in obj){
 var formatted = fill(Math.floor(obj[key] / 3600), 2) + ':' +
 fill(Math.floor(obj[key] / 60) % 60, 2); 
  rows+='<tr><td colspan="3">'+key+'</td><td>'+formatted+'</td></tr>';
 } 
return rows;
}

$('table').each(function(){
 var tr = {};
 $(this).find('tr').each(function(){
 var key = $(this).find('td.job_code').text();
 var val1 = toSeconds($(this).find('td.hrs').text());
//var val = +$(this).find('td.hrs').text().split(':')[0];
if(tr[key]){
  tr[key]+=val1;
 }else{
   tr[key]=val1; 
 } 
});

$(this).append(function(){
 var tfoot = $('<tfoot/>', {
 html: addRows(tr)
});
 return tfoot;
});
});

EDITED DEMO

edited May 20, 2014 at 14:37

answered May 20, 2014 at 4:01

Alex Shilman

1,5471 gold badge11 silver badges15 bronze badges

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

15 Comments

Alex Shilman Over a year ago

@mgardner05 not sure if this what you're looking for?

mgardner05 Over a year ago

Extremely close. Instead of totaling all job_codes together. I was hoping it would total each up individually. So say job_code 1 had 3 hours and job_code 2 had 5 hours. Can your code be changed to do that?

Alex Shilman Over a year ago

ahh, you want to dynamically create tables and group it by job_code?

mgardner05 Over a year ago

Sort of. If you look at my example jsFiddle you can get a better idea. I was looking for it to run through each table and do what my existing code did for each table, no matter how many there were.

mgardner05 Over a year ago

I was hoping to get the totals under each separate total instead of adding up across all the tables. Does that help?

|

Collectives™ on Stack Overflow

JQuery dynamic for loop issue

1 Answer 1

DEMO

15 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

15 Comments

Your Answer

Sign up or log in

Post as a guest

Related