Drehen Sie eine HTML-Tabelle um 90 Grad gegen den Uhrzeigersinn

Ich möchte den gesamten Tisch um 90 Grad gegen den Uhrzeigersinn drehen. dh. Der Inhalt von td (row = ith, column = jth) sollte in die td übertragen werden (row = (Gesamtzahl der Zeilen-j + 1) th, column = ith). Der Text innerhalb des div sollte ebenfalls um 90 Grad gedreht werden.Drehen Sie eine HTML-Tabelle um 90 Grad gegen den Uhrzeigersinn

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

diese Tabelle sollte

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

Ich kann dies tun zu

umgewandelt werden Javascript-Schleifen. Aber es ist sehr lang. Ich möchte wissen, ob es einen eleganteren Weg gibt. Danke im Voraus.

Quelle

2013-08-30 Serjical Kafka

Wie generieren Sie diese Tabelle? – Alberto

http://stackoverflow.com/questions/2730699/convert-td-columns-into-tr-rows, http://stackoverflow.com/questions/6297591/how-to-invert-the-rows-and-columns -einer-HTML-Tabelle – Andreas

@Alberto. generiert aus einem Array [[a, 1,8], [b, 2,9] ....]. Das Ganze ist ein Teil eines Addons. –

Der Text innerhalb der div sollte auch um 90 Grad gedreht werden.

Also im Grunde wollen Sie nur das Ganze als Block gedreht werden?

Vielleicht sollten Sie einfach CSS verwenden?

Quelle

2013-08-30 13:34:52 Spudley

Drehen Sie den ganzen Tisch verlieren Sie die Kontrolle über die Position des Tabelle selbst (http://jsfiddle.net/n55XV/). Ich denke, es ist besser, Tabellenzeilen und Spalten neu anzuordnen und dann td (s) zu drehen. – Alberto

@Alberto: Sie haben das gleiche Problem, wenn Sie nur die Zellen drehen. Siehe http://jsfiddle.net/n55XV/1/. Hast Du es versucht? (Ich habe die Wörter länger gemacht, um den Effekt ein wenig besser zu demonstrieren) Sie können 'transform-origin' und andere Tricks verwenden, um es zu umgehen, aber es ist viel einfacher, nur mit einem einzelnen Element (dh der Tabelle) zu arbeiten als Dutzende von einzelnen Zellen. – Spudley

Sie haben Recht! Danke, lass es mich merken! – Alberto

versuchen, diese DEMO

Referenz: Convert TD columns into TR rows und modifizierte david Antwort

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

nach Robbert Vorschlag 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; 
}

Quelle

2013-08-30 13:12:12

danke Mann. Was ist mit dem Drehen des Textes? Denken Sie, dass ein gemeinsamer Code für beide möglich ist? dh. Drehe den Tisch und den Td-Innertext um 'x' Grad. –

Dies könnte helfen: http: // stackoverflow.com/questions/15806925/how-to-rotate-text-links-90-grad-and-cell-size-is-adjusted-nach-text-in – Robbert

Betrug durch Erstellen einer bereits gedrehten Tabelle (trivial, da Sie Tabelle aus Array generieren). JS nur zum Ausblenden/Anzeigen von Tabellen.

prüfen dies: http://jsfiddle.net/nUvgp/

PRO: leicht

CONTRA: dupliziert Tabellencode

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

Quelle

2013-08-30 13:37:33 Alberto

Drehen Sie eine HTML-Tabelle um 90 Grad gegen den Uhrzeigersinn

Antwort

Verwandte Themen