How to invert (transpose) the rows and columns of an HTML table?

Question

I want to transpose the rows and columns in an HTML table, i.e. Rows as Columns, Columns as Rows.

In what way I can do it?

Example :

1 4 7   2 5 8   3 6 9 

as

1 2 3   4 5 6   7 8 9   

Answer 1

http://jsfiddle.net/CsgK9/2/

html:

<table>     <tr>         <td>1</td>         <td>4</td>         <td>7</td>     </tr>     <tr>         <td>2</td>         <td>5</td>         <td>8</td>     </tr>     <tr>         <td>3</td>         <td>6</td>         <td>9</td>     </tr> </table>   <p><a href="#">Do it.</a></p> 

js:

$("a").click(function(){     $("table").each(function() {         var $this = $(this);         var newrows = [];         $this.find("tr").each(function(){             var i = 0;             $(this).find("td").each(function(){                 i++;                 if(newrows[i] === undefined) { newrows[i] = $("<tr></tr>"); }                 newrows[i].append($(this));             });         });         $this.find("tr").remove();         $.each(newrows, function(){             $this.append(this);         });     });      return false; });