htmlテーブルを反時計回りに90度回転させます。

Question

テーブル全体を反時計回りに90度回転します。すなわち、 td（行= ith、列= jth）の内容は、td（行=（行の総数-j + 1）番目、列= 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> 

この表には、私はjavascriptのループによってこれを行うことができます

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

に変換する必要があります。しかし、それは非常に長い。よりエレガントな方法があるかどうかを知りたい。前もって感謝します。

Answer 1

div内のテキストも90度回転する必要があります。

基本的には、すべてをブロックとして回転させたいだけですか？

多分あなたはCSSを使うべきですか？

Answer 2

この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; 
} 

Answer 3

すでに回転テーブルを作成することで浮気をしています（配列からテーブルを生成するので簡単です）。 JSテーブルを表示/非表示にするだけです。

チェックこの：http://jsfiddle.net/nUvgp/

PRO：簡単

CONS：重複テーブルコード

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