使用 jQuery 或 PHP 转置表格答案

【问题标题】：Transpose table with jQuery or PHP使用 jQuery 或 PHP 转置表格
【发布时间】：2018-07-04 06:37:49
【问题描述】：

我有一个这种结构的表格，在一个 PHP 页面中，显示有回显：

<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>

我希望它转置然后显示。我需要它变成这样：

<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>

你能帮帮我吗？我尝试搜索其他脚本，例如 this，但它们似乎效果不佳。

【问题讨论】：

检查这个：stackoverflow.com/questions/6297591/…
您尝试搜索其他脚本，但它们似乎效果不佳？可以举个例子吗？
例如我发现了这个：stackoverflow.com/questions/25792178/…
它们总是在发布带有一些转换的表后工作。问题是我必须对我的表应用其他 jquery 转换，因此必须在显示代码之前对其进行转置

标签： jquery html-table transpose

【解决方案1】：

我调整了this gist，以便它转置包括thead 在内的整个表格。您可能想使用 CSS 更改样式。希望这会有所帮助。

$("#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>

【讨论】：