Change HTML table rows into columns and columns into rows

[Koya]

Hi,

I have a report that I display using an HTML table. However, I'd like to have the ability to customize the report dynamically where I could click a button on the page and have it change the HTML table rows into columns and columns into rows. The tricky part would be doing the wrap-arounds since the number of rows could be larger than the screen width when they're changed into columns and so all extras they have to start on a new line.

I am pretty sure this sounds confusing, so here is a simply example of how i'd like things to look like:

|A|B|C|
|D|E|F|
|H|I|J|
|K|L|M|

should be changed dynamically to:

|A|D|H|K|
|B|E|I|L|
|C|F|J|M|


now, the idea of doing all of this in pure javascript scares me alot and I am not even sure if the code (if I get it to work) will run on all the different
browsers we have today.

Do you guys have a good approach as to how you'd do this in code (neatly)? I am no Javascript Guru but I've seen strange things being done in JavaScript so pretty sure this is also possible.

Suggestions? (even in pseudocode)

Thanks a million

[CornedBee]

There's no really neat solution. You have to read the entire table into a 2d array, and then write it out transposed.

for i = 0 to rowcount
  for j = 0 to colcount
    jsarray[i][j] = htmltable[i][j]
  end
end
for i = 0 to rowcount
  for j = 0 to colcount
    htmltable[j][i] = jsarray[i][j]
  end
end

More complicated because you have to create the html table anew.

However, you could probably get rid of the temp array, because you're already using a new table.