Invert Rows And Columns In Tables Using jTranspose jQuery Plugin

jTranspose is a super tiny jQuery plugin that allows you to quickly transpose (invert) the rows and columns of an HTML table with minimal code.

This can be useful for converting data that is organized vertically into horizontal rows and vice versa. For example, you could take a table of data displayed down the rows and quickly convert it to display across the columns instead.

How to use it:

1. Download and import the jTranspose jQuery plugin.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/dist/jTranspose.js"></script>

2. Initialize the plugin on your HTML table:

<table>
  <thead>
    <tr>
      <th>Year</th>
      <th>Population</th>
      <th>Animal</th>
    </tr>
  </thead>
  <tbody>
    <tr id="y2010">
      <td>2010</td>
      <td>One</td>
      <td>Tiger</td>
    </tr>
    <tr id="y2011">
      <td>2011</td>
      <td>Two</td>
      <td>Rabit</td>
    </tr>
    <tr id="y2012">
      <td>2012</td>
      <td>Three</td>
      <td>Dragon</td>
    </tr>
    <tr id="y2013">
      <td>2013</td>
      <td>Four</td>
      <td>Snake</td>
    </tr>
  </tbody>
</table>

$(document).ready(function () {
  $('table').jTranspose();
});

3. The table's rows and columns will be inverted as follows.

<table>
  <tr>
    <th>Year</th>
    <td>2010</td>
    <td>2011</td>
    <td>2012</td>
    <td>2013</td>
  </tr>
  <tr>
    <th>Population</th>
    <td>One</td>
    <td>Two</td>
    <td>Three</td>
    <td>Four</td>
  </tr>
  <tr>
    <th>Animal</th>
    <td>Tiger</td>
    <td>Rabit</td>
    <td>Dragon</td>
    <td>Snake</td>
  </tr>
</table>

---

This awesome jQuery plugin is developed by optimumweb. For more Advanced Usages, please check the demo page or visit the official website.