Traversing multiple html tables with jQuery

Question

I've got a couple of HTML tables that are similar in structure. They both look something like this:

<table cellspacing="1" cellpadding="7" summary="Procedure Tabulate: Table 1" frame="box" rules="groups" class="table table-bordered table-hover highchart-table">
    <thead>
        <tr>
            <th scope="col" rowspan="2" class="c m Header">&nbsp;</th>
            <th scope="col" class="c Header">3</th>
        </tr>
        <tr>
            <th scope="col" class="c Header">CA R</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row" class="l t RowHeader">Fours</th>
            <td class="r b Data">10268.64</td>
        </tr>
        <tr>
            <th scope="row" class="l t RowHeader">Hifi</th>
            <td class="r b Data">11267.82</td>
        </tr>
        <tr>
            <th scope="row" class="l t RowHeader">Magneto</th>
            <td class="r b Data">11575.91</td>
        </tr>
        <tr class="blue-bg">
            <th scope="row" class="l t RowHeader">Total</th>
            <td class="r b Data">33112.36</td>
        </tr>
    </tbody>
</table>

I would like to run through all the tables with a class of highchart-table and retrieve CA R (last cell of last row of thead) and create associative arrays with the th and td inside tbody apart from the final "total line" ( ex: Fours => 10268.61, Hifi => 11575.91, Magneto => 11575.91 ).

My final goal would be to create an array something like this:

hcArr[0]['ind'] = 'CA R';
hcArr[0]['Fours'] = 10268.61;
hcArr[0]['Hifi'] = 11575.91;
hcArr[0]['Magneto'] = 11575.91;

And then have hcArr[1] which contains the contents of the next table with a class of highchart-table.

For the moment the only code I have that is working is:

$.each( $( '.highchart-table' ), function( key, value ) {

});

I can't figure out how to then go from having the table in the current loop to getting it's rows and cells.

Any help would be much appreciated.

Nabab · Accepted Answer · 2013-03-12 17:52:50Z

1

Something like this should work:

var res = [];

$(".highchart-table").each(function() {
  var $$ = $(this), obj = {};
  obj.ind = $(this).find('thead tr:last th:last').text();
  $$.find("tbody th").each(function(){
    obj[$(this).text()] = parseFloat($(this).siblings("td").text());
  });
  res.push(obj);
});

console.log(res);

By the way, arrays in javascript are only numeric indexed, so it would return an array of objects like this:

[
  { "ind": "CA R", "Fours": 10268.64, "Hifi": 11267.82, "Magneto": 11575.91 },
  { "ind": "CA R", "Fours": 10268.64, "Hifi": 11267.82, "Magneto": 11575.91 },
  ...
]

answered Mar 12, 2013 at 17:52

Nabab

2,6641 gold badge20 silver badges34 bronze badges

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

Comments

Justin Bicknell · Accepted Answer · 2013-03-12 17:08:28Z

1

This isn't a final solution, but this will give you the initial values within the header cells. You could extrapolate from this to get the others. http://jsfiddle.net/tM546/:

var theadValues = $.map($('.highchart-table'), function (idx, el) {
    return $(idx).find('thead tr:last th:last').text();
});

answered Mar 12, 2013 at 17:08

Justin Bicknell

4,81620 silver badges27 bronze badges

1 Comment

xonorageous Over a year ago

Thanks, I'd forgotten about using .map, I was only thinking about using standard foreach loops

Collectives™ on Stack Overflow

Traversing multiple html tables with jQuery

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related