Transpose table with jQuery or PHP

Question

I have a table with this structure, in a PHP page, showed with an echo:

<table id="transpose">
<thead>
    <tr>
        <th>Event</th>
        <th>Monday</th>
        <th>Tuesday</th>
        <th>Wednesday</th>
        <th>Thursday</th>
        <th>Friday</th>
        <th>Saturday</th>
        <th>Sunday</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>One</td>
        <td>text11</td>
        <td>text12</td>
        <td>text13</td>
        <td>text14</td>
        <td>text15</td>
        <td>text16</td>
        <td>text17</td>
    </tr>


    <tr>
        <td>Two</td>
        <td>text21</td>
        <td>text22</td>
        <td>text23</td>
        <td>text24</td>
        <td>text25</td>
        <td>text26</td>
        <td>text27</td>
    </tr>
</tbody>

I want it to transpose and then show it. I need it to become like this:

<table id="transpose">
<thead>
    <tr>
        <th>Event</th>
        <th>One</th>
        <th>Two</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>Monday</td>
        <td>text11</td>
        <td>text21</td>
    </tr>
    <tr>
        <td>Tuesday</td>
        <td>text12</td>
        <td>text22</td>
    </tr>
    <tr>
        <td>Wednesday</td>
        <td>text13</td>
        <td>text23</td>
    </tr>
    <tr>
        <td>Thursday</td>
        <td>text14</td>
        <td>text24</td>
    </tr>
    <tr>
        <td>Friday</td>
        <td>text15</td>
        <td>text25</td>
    </tr>
    <tr>
        <td>Saturday</td>
        <td>text16</td>
        <td>text26</td>
    </tr>
    <tr>
        <td>Sunday</td>
        <td>text17</td>
        <td>text27</td>
    </tr>
</tbody>

Can you help me? I tried searching for other scripts as for instance this but they don't seem to work very well.

Check this :http://stackoverflow.com/questions/6297591/how-to-invert-the-rows-and-columns-of-an-html-table — Abhishekh Gupta, Jun 06 '15 at 10:03
You tried searching for other scripts and they don't seem to work very well? Would you please post an example? — user2314737, Jun 06 '15 at 10:05
for example I found this: http://stackoverflow.com/questions/25792178/jquery-to-transpose-html-table-with-header-and-footer — Ame, Jun 06 '15 at 10:12
they Always work after posting the table with some trasformations.. the problem is that I have to apply an other jquery transformation to my table so it has to be transposed before showing the code — Ame, Jun 06 '15 at 10:13

score 2 · Accepted Answer · answered Jun 06 '15 at 11:28

I adapted this gist so that it transposes the whole table including thead. You might want to change the styling with CSS. Hope this helps.

$("#transpose").click(function() {
  var rows = $('#thetable tr');
  var r = rows.eq(0);
  var nrows = rows.length;
  var ncols = rows.eq(0).find('th,td').length;

  var i = 0;
  var tb = $('<tbody></tbody>');

  while (i < ncols) {
    cell = 0;
    tem = $('<tr></tr>');
    while (cell < ncols) {
      next = rows.eq(cell++).find('th,td').eq(0);
      tem.append(next);
    }
    tb.append(tem);
    ++i;
  }
  $('#thetable').append(tb);
  $('#thetable').show();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="submit" value="transpose" id="transpose" />
<table id="thetable">
  <thead>
    <tr>
      <th>Event</th>
      <th>Monday</th>
      <th>Tuesday</th>
      <th>Wednesday</th>
      <th>Thursday</th>
      <th>Friday</th>
      <th>Saturday</th>
      <th>Sunday</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>One</td>
      <td>text11</td>
      <td>text12</td>
      <td>text13</td>
      <td>text14</td>
      <td>text15</td>
      <td>text16</td>
      <td>text17</td>
    </tr>


    <tr>
      <td>Two</td>
      <td>text21</td>
      <td>text22</td>
      <td>text23</td>
      <td>text24</td>
      <td>text25</td>
      <td>text26</td>
      <td>text27</td>
    </tr>
  </tbody>

Transpose table with jQuery or PHP

1 Answers1