Create list / array of table values

Question

I have a table with 6 fixed columns that looks like the below and variable content that is created dynamically. Within each column a value can only appear once but may not appear in all columns.

Is there a way I can get a list / array with all the values from the columns Cat and the volumes from columns Vol like the example variables below?

My table:

<table id="myTable">
    <thead>
        <tr>
            <th class="myHeader">Cat 1</th>
            <th>Vol 1</th>
            <th class="myHeader">Cat 2</th>
            <th>Vol 2</th>
            <th class="myHeader">Cat 3</th>
            <th>Vol 3</th>
            //...
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>item1</td><td>8</td><td>item2</td><td>7</td><td>item3</td><td>9</td>
        </tr>
        <tr>
            <td>item3</td><td>5</td><td>item2</td><td>7</td><td>item1</td><td>4</td>
        </tr>
        <tr>
            <td>item2</td><td>1</td><td>item1</td><td>5</td><td>item3</td><td>3</td>
        </tr>
        //...
    </tbody>
</table>

Required output:

var item1 = [8, 4, 5]
var item2 = [7, 7, 1]
var item3 = [9, 5, 3]

Ok, I think I've found a solution without the classes moreover, I test it on jsfiddle and answer after ;) And it seems you have a typo: </body> should be </tbody> — Biduleohm
– Biduleohm, Commented Apr 5, 2014 at 15:47
Awesome - thanks ! Corrected the typo, this was only here on the page. — user2571510
– user2571510, Commented Apr 5, 2014 at 15:53

Biduleohm · Accepted Answer · 2014-04-05 16:10:16Z

1

Try this:

$(document).ready(function() {

    var items ={
        item1: [],
        item2: [],
        item3: []
    };
    $('#myTable > tbody > tr').each(function() {
        var cols = $(this).find('td');
        for (var col = 0; col < cols.length; col += 2) {
            items[$(cols[col]).text()].push(+$(cols[col + 1]).text());
        }
    });
    console.log(items);
});

Working example: http://jsfiddle.net/QLyKk/ (I left a item empty to show that in this case a 0 is put in the array)

answered Apr 5, 2014 at 16:10

Biduleohm

7502 gold badges11 silver badges20 bronze badges

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

Comments

raina77ow · Accepted Answer · 2014-04-05 15:53:46Z

1

One possible approach:

var itemsData = {
  item1: [],
  item2: [],
  item3: []
};

var $td = $('#myTable').find('td');

$.each(itemsData, function(itemName) {
  $td.filter(':contains(' + itemName + ')').each(function(el) {
    itemsData[itemName].push(this.nextSibling.innerText);
  });
});

Demo. I've replaced variables item1, item2 with a single data object storing those as properties. The key part of this approach is contains function that checks the text contents of the given element for a given string.

An alternative to this approach would be giving those 'header' <td> elements specific data attribute. For example:

<td data-item="item3">item3</td><td>5</td>
<td data-item="item2">item2</td><td>7</td>
...

... then the corresponding part of the function will change to ...

$td.filter('[data-item="' + itemName + '"]').each(function(el) { // ...

answered Apr 5, 2014 at 15:53

raina77ow

107k16 gold badges205 silver badges240 bronze badges

3 Comments

user2571510 Over a year ago

Thanks - this looks very good! Same question as below: Is there a way I can set this so that an array always contains 6 values, to cover the case where an item does not appear in a column ? E.g. the array could show 0 then for this column.

raina77ow Over a year ago

Not sure what you mean; can you alter the demo I created, showing example of the structure you talk about?

user2571510 Over a year ago

Sorry, I meant 3 values (not 6). I'll have a look at your demo and compare with the other solutions. Thanks again !

Mir Gulam Sarwar · Accepted Answer · 2014-04-05 16:00:27Z

1

Here is the working demo http://jsfiddle.net/symonsarwar/9W5Uu/

<table id="myTable">
    <thead>
        <tr>
            <th class="myHeader">Cat 1</th>
            <th>Vol 1</th>
            <th class="myHeader">Cat 2</th>
            <th>Vol 2</th>
            <th class="myHeader">Cat 3</th>
            <th>Vol 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>item1</td><td class="item1">8</td><td>item2</td><td class="item2">7</td><td>item3</td><td class="item3">9</td>
        </tr>
        <tr>
            <td>item3</td><td class="item3">5</td><td>item2</td><td class="item2">7</td><td>item1</td><td class="item1">4</td>
        </tr>
        <tr>
            <td>item2</td><td class="item2">1</td><td>item1</td><td class="item1">5</td><td>item3</td><td class="item3">3</td>
        </tr>
    </body>
</table>

$(function(){
    var item1=new Array();
    var item2=new Array();
    var item3=new Array();
    $('.item1').each(function(){
    item1.push($(this).html());
    });

    $('.item2').each(function(){
    item2.push($(this).html());
    });

    $('.item3').each(function(){
    item3.push($(this).html());
    });
});

edited Apr 5, 2014 at 16:00

answered Apr 5, 2014 at 15:53

Mir Gulam Sarwar

2,6482 gold badges27 silver badges39 bronze badges

3 Comments

user2571510 Over a year ago

Thanks for this! Is there a way I can set this so that an array always contains 6 values, to cover the case where an item does not appear in a column ? E.g. the array could show 0 then for this column.

Mir Gulam Sarwar Over a year ago

I don't understand what you said.Do you want exactly 6 item in the array?

user2571510 Over a year ago

Sorry, I meant 3 values (not 6). I'll have a look at your demo and compare with the other solutions. Thanks again !

Collectives™ on Stack Overflow

Create list / array of table values

3 Answers 3

Comments

3 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related