title: JavaScript/JQuery swap horizontal and vertical order of HTML table
body: <p>I have a complex HTML table with horizontal and vertical headings looking like this.</p>
  
  <p><img src="https://i.stack.imgur.com/0TyYY.jpg" alt="Example of complex table"></p>
  
  <p>The HTML code is simple:</p>
  
  <pre><code>&lt;table&gt;
      &lt;tr&gt;
        &lt;th&gt;(empty)&lt;/th&gt;
        &lt;th&gt;Heading 1&lt;/th&gt;
        &lt;th&gt;Heading 2&lt;/th&gt;
      &lt;/tr&gt;
   &lt;tr&gt;
    &lt;th&gt;Heading A&lt;/th&gt;
       &lt;td&gt;content for 1 and A&lt;/td&gt;
       &lt;td&gt;content for 2 and A&lt;/td&gt;
   &lt;/tr&gt;
   &lt;tr&gt;
    &lt;th&gt;Heading B&lt;/th&gt;
       &lt;td&gt;content for 1 and B&lt;/td&gt;
       &lt;td&gt;content for 2 and B&lt;/td&gt;
   &lt;/tr&gt;
   &lt;tr&gt;
    &lt;th&gt;Heading C&lt;/th&gt;
       &lt;td&gt;content for 1 and C&lt;/td&gt;
       &lt;td&gt;content for 2 and C&lt;/td&gt;
   &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Now, I want to give the users of my website the possibility to swap the content of the table. I.e.: change the horizontal and vertical order, so that afterwards the vertical headings are horizontal, the horizontal headings are vertical and the table cells accordingly. Sounds complicated, but you will get it by looking at the picture:</p>
  
  <p><img src="https://i.stack.imgur.com/Uhlbq.jpg" alt="complex table after swapping"></p>
  
  <p>The HTML would be now:</p>
  
  <pre><code>&lt;table&gt;
      &lt;tr&gt;
        &lt;th&gt;(empty)&lt;/th&gt;
        &lt;th&gt;Heading A&lt;/th&gt;
        &lt;th&gt;Heading B&lt;/th&gt;
        &lt;th&gt;Heading C&lt;/th&gt;
      &lt;/tr&gt;
   &lt;tr&gt;
    &lt;th&gt;Heading 1&lt;/th&gt;
       &lt;td&gt;content for 1 and A&lt;/td&gt;
       &lt;td&gt;content for 1 and B&lt;/td&gt;
       &lt;td&gt;content for 1 and C&lt;/td&gt;
   &lt;/tr&gt;
   &lt;tr&gt;
    &lt;th&gt;Heading 2&lt;/th&gt;
       &lt;td&gt;content for 2 and A&lt;/td&gt;
       &lt;td&gt;content for 2 and B&lt;/td&gt;
       &lt;td&gt;content for 2 and C&lt;/td&gt;
   &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Technically speaking, evey table cell (<code>th</code> and <code>td</code>) has to swap its indices: The column index should become the row index and the column index should become the rown index. But how do I do that using JavaScript and or JQuery?</p>
  
  <p>I already found out how to get the row and column index:</p>
  
  <pre><code>//column
  $(this).parent().children().index(this);
  
  //row
  $(this).parent().parent().children().index(this.parentNode);
  </code></pre>
  
  <p>But there seems no JQuery function for "set table cell position", there is just <code>.inserAfter</code> and honestly, I don't know how to cope with that.</p>