Question

我想将整个桌子逆时针旋转90度。即。应将td（row = ith，column = jth）的内容传送到td（row =（行数总数-j + 1）th，column = 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循环来做到这一点。但它很长。我想知道是否有更优雅的方式。提前谢谢。

Answer 1

div内的文本也应旋转90度。

所以基本上你只是希望将整个事件作为一个块进行旋转？

也许你应该只使用CSS？

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

Answer 2

通过创建已经旋转的表来作弊（因为从数组生成表格，所以很简单）。 JS只是为了隐藏/显示表格。

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

PRO：easy

缺点：重复的表格代码

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

Answer 3

试试 DEMO

参考：Convert TD columns into TR rows并修改了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; }

将html表沿逆时针方向旋转90度

3 个答案: