Obróć tabelę html o 90 stopni w kierunku przeciwnym do ruchu wskazówek zegara.

Question

Chcę obrócić cały stół o 90 stopni w kierunku przeciwnym do ruchu wskazówek zegara. to znaczy. zawartość td (wiersz = i, kolumna = jth) powinna zostać przeniesiona do td (wiersz = (całkowita liczba wierszy-j + 1) th, kolumna = i). Tekst wewnątrz div również powinien być obrócony o 90 stopni.

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

tabela ta powinna zostać przekształcona do

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

mogę to zrobić poprzez javascript pętle. Ale to bardzo długo. Chcę wiedzieć, czy istnieje bardziej elegancki sposób. Z góry dziękuję.

Answer 1

Tekst wewnątrz elementu div również powinien być obrócony o 90 stopni.

Po prostu chcesz, aby całość została obrócona jako blok?

Może powinieneś po prostu użyć CSS?

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

Answer 2

spróbować tej DEMO

odniesienie: Convert TD columns into TR rows i modyfikowane david odpowiedź

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

zgodnie Robbert sugestią 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

Oszukiwanie tworząc już obrócony tabeli (trywialny, ponieważ można wygenerować tabelę z tablicy). JS tylko do ukrywania/pokazywania stolików.

Sprawdź to: http://jsfiddle.net/nUvgp/

PRO: łatwe

Minusy: powielany kod stół

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