Populating a HTML table using JS with data in wrong order

Question

I have an array of data that has been collected by iterating through an existing table as such:

    ---------------
    Mon | Hot  | 12 
    ---------------
    Tue | Cold | -2 
    ---------------
    Wed | Warm | 3  
    ---------------
    Thu | Cold | -4 
    ---------------
    Fri | Cold | -3 
    ---------------

The data in the array is stored as such: ['Mon', 'Hot', '12', 'Tue', 'Cold', '-2' .. etc ..]

The data now needs to be displayed in a table that has flipped the rows and columns, so that the data is shown as follows:

Mon | Tue  | Wed  | Thu  | Fri
-------------------------------
Hot | Cold | Warm | Cold | Cold
-------------------------------
12  | -2   | 2    | -4   | -3

I am struggling to find the right loop statements to print the data correctly.

So far I have the following:

for (i = 0; i < weather_data.length; i++)
{                                                        
    if (i%5==0)
    {
        table.push('<tr><td>'+weather_data[i*3]+'</td>');
    }
    else if(i%4==0)
    {
        table.push('<td>'+weather_data[i*3]+'</td></tr>');
    }
    else
    {
        table.push('<td>'+weather_data[i*3]+'</td>');
    }
}

Which correctly displays the top line, but the rest is all undefined because the called indexes are too large for the array obviously. I have worked out the the 2nd row needs to call the following index: ((index-5)*3)+1, but the 3rd row is going to require a different index call too.. there must be an equation that will work for all rows.. this must be a fairly common operation!

The resultant table needs to show indexes in the following order:

0   3   6   9   12
1   4   7   10  13
2   5   8   11  14

So the loop needs to generate these in order of left to right, then next row etc.

~It also needs to added the necessary starting <tr> and </tr> tags respectively.

I don't I'm afraid, the actual site is private, and the functionality depends on the results of numerous AJAX calls, plus I have never used jsfiddle before and it would take me a very long time to set it up, apologies. I will learn how to use it ASAP though. — Alex
– Alex, Commented Jul 7, 2012 at 19:28
You wouldn't need to put the whole page on jsfiddle. Just something that represents your logic. — Lee Taylor
– Lee Taylor, Commented Jul 7, 2012 at 19:31
The table data is pulled from an external file; I would have to totally change my code.. The question is really a maths one, the context of the site is quite unimportant. — Alex
– Alex, Commented Jul 7, 2012 at 19:32
I am trying to do it now though, will update if I have any success! — Alex
– Alex, Commented Jul 7, 2012 at 19:34

Pavel Strakhov · Accepted Answer · 2012-07-07 19:34:55Z

3

var data = ['Mon', 'Hot', '12', 'Tue', 'Cold', '-2', 
            'Wed', 'Warm', '3', 'Thu', 'Cold', '-4'];
var width = 3;
var height = data.length / width;
var r = "";
for(var i = 0; i < width; i++) {
  var row = [];
  for(var j = 0; j < height; j++) {
    row.push("<td>" + data[j * width + i] + "</td>");
  }
  r += "<tr>" + row.join("") + "</tr>";
}  

$("#container_id").html("<table>" + r + "</table>");

answered Jul 7, 2012 at 19:34

Pavel Strakhov

40.8k6 gold badges93 silver badges131 bronze badges

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

Collectives™ on Stack Overflow

Populating a HTML table using JS with data in wrong order

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related