0

I have an html table I can't touch and I'm trying to rotate it somehow with either CSS or JS (or jquery). Basically it's simple table as in:

<table>
<thead>
<tr><th>header1</th><th>header2</th></tr>
</thead>
<tbody>
<tr><td>content1</td><td>content2</td></tr>
<tbody>
</table>

I'd need that table to be rotated so that it shows

header 1 content 1
header 2 content 2

I tried to do it in this jsfiddle (http://jsfiddle.net/Hskke/136/) but for some reason the code I've been playing with (from here: https://stackoverflow.com/a/6297892) doesn't work. Any ideas what I'm trying to do wrong?

My jsfiddle also contains the original html code so there's some extra data..

Community
  • 1
  • 1
Tuxie
  • 565
  • 5
  • 9

1 Answers1

2

We can do something like this 

var  x = $("#walls_settings_timers").find("th,td");

var i = $("#walls_settings_timers").find("tr").length;

var j = x.length/i;
console.log(i , j);
var newT= $("<table>").appendTo("body");
for (j1=0; j1<j;j1++){
    var temp = $("<tr>").appendTo(newT);
    for(var i1=0;i1<i; i1++){
        temp.append($(x[i1*j+j1]).clone());
    }

}

check out the jsFiddle here

Sunand
  • 703
  • 4
  • 9