将HTML表格逆时针旋转90度

Question

我想将整个表格逆时针旋转90度。即td（行= ith，列= jth）的内容应转移到td（行=（总行数-j + 1）th，列= ith）。 div内的文本也应旋转90度。

<table><tbody>
<tr><td>a</td><td>1</td><td>8</td></tr>
<tr><td>b</td><td>2</td><td>9</td></tr>
<tr><td>c</td><td>3</td><td>10</td></tr>
<tr><td>d</td><td>4</td><td>11</td></tr>
<tr><td>e</td><td>5</td><td>12</td></tr>
<tr><td>f</td><td>6</td><td>13</td></tr>
<tr><td>g</td><td>7</td><td>14</td></tr>
</tbody></table>   

这个表格应该被转换为：

<table><tbody>
<tr>
    <td>8</td><td>9</td><td>10</td><td>11</td>
    <td>12</td><td>13</td><td>14</td>
</tr>
<tr>
    <td>1</td><td>2</td><td>3</td><td>4</td>
    <td>5</td><td>6</td><td>7</td>
</tr>
<tr>
    <td>a</td><td>b</td><td>c</td><td>d</td>
    <td>e</td><td>f</td><td>g</td>
</tr>
</tbody></table> 

我可以通过JavaScript循环来实现此操作。但这样会很冗长。我想知道是否有更加优雅的方式。提前感谢。

- Serjical Kafka

---

你是如何生成那个表格的？ - Alberto

将td列转换为tr行，如何反转HTML表格的行和列 - Andreas

@Alberto，这段内容是从一个数组[[a,1,8],[b,2,9]...]生成的，整个内容是插件的一部分。 - Serjical Kafka

@SerjicalKafka 在这种情况下，请检查我的答案 :) - Alberto

我可以通过 JavaScript 循环来实现这个。但是这样会很冗长。实际上并不需要这么麻烦。 - Popnoodles

Answer 1

标签内的文本也应该旋转90度。

所以基本上你只是想把整个东西作为一个块旋转？

也许你应该使用CSS？

#myTable {
    transform:rotate(270deg);
}

- Spudley

---

旋转整个表格会失去对表格本身位置的控制(http://jsfiddle.net/n55XV/)。我认为最好重新排列表格行和列，然后再旋转td(s)。 - Alberto

@Alberto：如果你只旋转单元格，你会遇到同样的问题。请参考http://jsfiddle.net/n55XV/1/。你试过了吗？（我把单词变长了一些，以便更好地演示效果）你可以使用`transform-origin`和其他技巧来解决它，但是与处理数十个单独的单元格相比，仅使用一个元素（即表格）要容易得多。 - Spudley

太棒了，正是我所需要的。点赞。[+1] - kapitan

然后，它可以部分地离开屏幕。 - Petr L.

Answer 2

通过创建已经旋转的表格来作弊（因为您是从数组生成表格，所以这很简单）。

使用JS来隐藏/显示表格。

请查看：http://jsfiddle.net/nUvgp/

优点：易于操作。

缺点：代码中存在重复的表格。

HTML：

<a href="#" id="rotate">Rotate!</a>
<table id='myTable'><tbody>
<tr><td>a</td><td>1</td><td>8</td></tr>
<tr><td>b</td><td>2</td><td>9</td></tr>
<tr><td>c</td><td>3</td><td>10</td></tr>
<tr><td>d</td><td>4</td><td>11</td></tr>
<tr><td>e</td><td>5</td><td>12</td></tr>
<tr><td>f</td><td>6</td><td>13</td></tr>
<tr><td>g</td><td>7</td><td>14</td></tr>
</tbody></table>
<table id='myRotatedTable'><tbody>
<tr>
    <td>8</td><td>9</td><td>10</td><td>11</td>
    <td>12</td><td>13</td><td>14</td>
</tr>
<tr>
    <td>1</td><td>2</td><td>3</td><td>4</td>
    <td>5</td><td>6</td><td>7</td>
</tr>
<tr>
    <td>a</td><td>b</td><td>c</td><td>d</td>
    <td>e</td><td>f</td><td>g</td>
</tr>
</tbody></table> 

CSS:

#myRotatedTable {
    display:none;
}
#myRotatedTable td {
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    writing-mode: lr-tb;
}

JS:

$('#rotate').click(function (e) {
    e.preventDefault();
    $("#myTable").toggle();
    $("#myRotatedTable").toggle();
})

- Alberto

Answer 3

请尝试这个演示

参考: 将TD列转换为TR行，并修改了david的答案

TransposeTable('myTable');
function TransposeTable(tableId)
{        
  var tbl = $('#' + tableId);
  var tbody = tbl.find('tbody');
  //var oldWidth = tbody.find('tr:first td').length;
  var oldWidth = 0;
   //calculate column length if there is 'td=span' added    
   $('tr:nth-child(1) td').each(function () {
      if ($(this).attr('colspan')) {
          oldWidth += +$(this).attr('colspan');
      } else {
          oldWidth++;
      }
  });
  var oldHeight = tbody.find('tr').length;
  var newWidth = oldHeight;
  var newHeight = oldWidth;

  var jqOldCells = tbody.find('td');

  var newTbody = $("<tbody></tbody>");
  for(var y=newHeight; y>=0; y--)
  {
      var newRow = $("<tr></tr>");
      for(var x=0; x<newWidth; x++)
      {
          newRow.append(jqOldCells.eq((oldWidth*x)+y));
      }
      newTbody.append(newRow);
  }

  tbl.addClass('rotate');

  tbody.replaceWith(newTbody);        
}  

根据Robbert的建议，CSS。

.rotate {
  -moz-transform: rotate(-90.0deg);  /* FF3.5+ */
  -o-transform: rotate(-90.0deg);  /* Opera 10.5 */
  -webkit-transform: rotate(-90.0deg);  /* Saf3.1+, Chrome */
  filter:  progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083);  /* IE6,IE7 */
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)"; /* IE8 */

  padding-right:50px;
}

- Pragnesh Chauhan

---

谢谢，关于旋转文本怎么样？你认为是否可能有一个通用的代码来同时旋转表格和td元素的文本内容呢？比如将它们旋转x度。 - Serjical Kafka

这可能会有所帮助：https://dev59.com/P2Uo5IYBdhLWcg3wvBiX - Robbert