Bir html tablosunu saat yönünün tersine 90 derece döndürün

Question

Tablonun tamamını saat yönünün tersine 90 derece döndürmek istiyorum. yani. td'nin içeriği (satır = ith, sütun = jth) td'ye (satır = (satır sayısı-j + 1) th, sütun = ith) aktarılmalıdır. Div içindeki metin de 90 derece döndürülebilir.

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

bu tablo

javascript döngüler tarafından

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

bunu yapabilirim dönüştürülmesi gerekmektedir. Ama çok uzun. Daha zarif bir yol olup olmadığını bilmek istiyorum. Şimdiden teşekkürler.

Answer 1

Div içindeki metin de 90 derece döndürülmelidir.

Temel olarak, yalnızca tüm şeyin bir blok olarak döndürülmesini istersiniz?

Belki de sadece CSS kullanmalısınız?

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

Answer 2

bu DEMO

başvuru deneyin: Convert TD columns into TR rows ve david cevap

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

olarak Robbert öneri CSS başına modifiye

.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

Zaten önceden döndürülen bir tablo oluşturarak aldatma (diziden tablo oluşturduğunuzdan önemsiz). JS sadece tabloları gizlemek/göstermek için.

Kontrol bu: http://jsfiddle.net/nUvgp/

PRO: Kolay

İNŞAAT: çoğaltılamaz tablo kodu

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