Question

我有一个带有这种结构的表，在PHP页面中，显示了一个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>

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

<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，但它们看起来效果不佳。

Answer 1

我改编了this gist，以便转换整个表格，包括thead。您可能希望使用CSS更改样式。希望这会有所帮助。

＆＃13;

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

＆＃13;

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

＆＃13;

使用jQuery或PHP转置表

1 个答案: