JQuery用于包含HTML表数据的每个循环

Question

So I have an HTML table that looks like the following.

<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>

Then I have a jquery script that takes the total "job_code" hours and adds them up for each individual one. However, right now the script combines "tommytest" and "testtest" job codes together. I'm trying to get it to calculate each one individually and print it underneath each's respected table. Any ideas are greatly appreciated.

$(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>');
});

});

Link to jsFiddle: http://jsfiddle.net/Ha546/2/

If at all possible I'd like this to be dynamic as there will be more than just these two tables. Thanks ahead of time for the help.

Answer 1

When you query for the TD tags, $(this).next('td.hrs') you are not being specific enough about which table you want the TD tags from. If you are more specific, for example, adding an id to the tables,

<table id="tommytest">...</table>
<table id="testtest">...</table>

then you can query by table like so:

var tdsFromTommytest = $(this).next('#tommytest td.hrs')
var tdsFromTesttest = $(this).next('#testtest td.hrs')

Now that you have the two separate TD lists, you can process how you want. That, I think is the crux of your problem. But hopefully that helps you enough to see how you'd update a separate total tag under each table.

Answer 2

You could do this for tommyTest and subsequently for testtest :

Add id to the individual table

<table id="tommyTest">

And in javascript create different method for calculating the value :

$('#tommyTest').find('.job_code').each(function (index, element) {
        var text = $(this).text();
        if (text != 'Out') {
            temp.push(text);
        }
    });