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: Did you try adding dynamic table to it and run?
• mgardner05: @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.
• SSS: Just write the calculation code in a callback function and you are good to go. Invoke the function when content added dynamically
• PeterKA: Your design does not seem to allow a per user/table total. How do you want to handler individual user totals?
• mgardner05: @SSS can you show me with a sample jsFiddle?

Answer 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

• Alex Shilman: @mgardner05 not sure if this what you're looking for?
• mgardner05: 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: ahh, you want to dynamically create tables and group it by job_code?
• mgardner05: 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: I was hoping to get the totals under each separate total instead of adding up across all the tables. Does that help?