JQuery not grabbing HTML data

Question

I have the following HTML table displayed on my webpage.

<div class="timecard">
<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_even odd">
            <td align="left" class="job_code" style="color:#000099">1500-Emerald</td>
            <td align="right">12:37am</td>
            <td align="right">5/17/2014</td>
            <td align="right" class="hrs">0:30</td>
        </tr>
    </tbody>
</table>
</div>

<div id="total"></div>

Then I have the following jquery script that grabs the total times for each job_code and adds them up and displays them. However, it does not seem to be working properly. It isn't displaying the totals added up by the jQuery statement underneath the HTML table as it should be.

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

});

http://jsfiddle.net/2D5fb/1/

Any ideas are greatly appreciated. Thanks.

"it does not seem to be working properly" Could you elaborate a wee bit on this? — j08691
– j08691, Commented May 19, 2014 at 19:28
Try adding this debugging line: console.log($(this)); right after the $(document).ready(function () { line. I believe this in this case is the window object. Is that what you're expecting? — War10ck
– War10ck, Commented May 19, 2014 at 19:31
Change var timeString = $(this).next('td.hrs').text(); to var timeString = $(this).siblings('td.hrs').text();. .next() literally only looks at the next element and td.hrs isn't the next one. — j08691
– j08691, Commented May 19, 2014 at 19:32

j08691 · Accepted Answer · 2014-05-19 19:36:04Z

2

Aside from total not being defined, change:

var timeString = $(this).next('td.hrs').text();

to

var timeString = $(this).siblings('td.hrs').text();

.next() literally only looks at the next element and td.hrs isn't the next one. .siblings() however will run through all the siblings.

jsFiddle example

answered May 19, 2014 at 19:36

j08691

209k33 gold badges269 silver badges281 bronze badges

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

8 Comments

h3tr1ck Over a year ago

I agree that code works on jsFiddle, however when I copied it to my site and replaced it with the code I had, it is now displaying now text from the jquery.

j08691 Over a year ago

Then you'll need to post a complete code example versus the snippet above. I also don't understand what you mean by "text from the jquery".

h3tr1ck Over a year ago

the .append statement from the jquery is not displaying on the webpage, whereas before your changes it was displaying "The total of ...." NaN.

j08691 Over a year ago

I made one small change, I don't see how that would do what you're saying. .next('td.hrs') to .siblings('td.hrs'). What exactly did you change? Are you getting errors in the console?

h3tr1ck Over a year ago

No errors in the console. Here I created a jsFiddle example with my above HTML and your JQuery changes. jsfiddle.net/2D5fb/1

|

Collectives™ on Stack Overflow

JQuery not grabbing HTML data

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related