Converti colonne TD in righe TR

Question

C'è un modo rapido per tradurre (usando i CSS o Javascript) un TD tabelle in TR, attualmente ho:

A B C D 
1 2 3 4 

e voglio tradurre in:

A 1 
B 2 
C 3 
D 4 

??

Answer 1

Volete trasformare HTML organizzato in questo modo:

<tr><td>A</td><td>B</td><td>C</td><td>D</td></tr> 
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr> 

In questa:

<tr><td>A</td><td>1</td></tr> 
<tr><td>B</td><td>2</td></tr> 
<tr><td>C</td><td>3</td></tr> 
<tr><td>D</td><td>4</td></tr> 

corretta?

È possibile farlo con Javascript, tuttavia è difficile suggerire un metodo senza sapere di più sulla struttura del proprio sito/file HTML. Ci provo.

Assumendo che il tag <table> viene fornito con un id (come questo: <table id="myTable"> è possibile accedervi in ​​javascript in questo modo:

var myTable = document.getElementById('myTable'); 

È possibile creare una nuova tabella come questa:

var newTable = document.createElement('table'); 

Ora è necessario trasporre le righe delle vecchie tabelle nelle colonne delle nuove tabelle:

var maxColumns = 0; 
// Find the max number of columns 
for(var r = 0; r < myTable.rows.length; r++) { 
    if(myTable.rows[r].cells.length > maxColumns) { 
     maxColumns = myTable.rows[r].cells.length; 
    } 
} 


for(var c = 0; c < maxColumns; c++) { 
    newTable.insertRow(c); 
    for(var r = 0; r < myTable.rows.length; r++) { 
     if(myTable.rows[r].length <= c) { 
      newTable.rows[c].insertCell(r); 
      newTable.rows[c].cells[r] = '-'; 
     } 
     else { 
      newTable.rows[c].insertCell(r); 
      newTable.rows[c].cells[r] = myTable.rows[r].cells[c].innerHTML; 
     } 
    } 
} 

Questo dovrebbe fare quello che ti serve. Essere avvisati: non testato. Lavorare questo codice javascript in una pagina HTML è lasciato come esercizio per il lettore. Se qualcuno rileva eventuali errori che mi sono persi, sono gratificato se me li indichi o semplicemente modifichi per risolvere :)

Answer 2

Ecco una funzione testata che trasporrà una tabella e che conserverà qualsiasi formattazione/eventi avevano agganciato a tutti gli elementi all'interno della tabella (ad esempio: onclicks su cellulari o cellulari contenuti)

function TransposeTable(tableId) 
{   
    var tbl = $('#' + tableId); 
    var tbody = tbl.find('tbody'); 
    var oldWidth = tbody.find('tr:first td').length; 
    var oldHeight = tbody.find('tr').length; 
    var newWidth = oldHeight; 
    var newHeight = oldWidth; 

    var jqOldCells = tbody.find('td');   

    var newTbody = $("<tbody></tbody>"); 
    for(var y=0; y<newHeight; y++) 
    { 
     var newRow = $("<tr></tr>"); 
     for(var x=0; x<newWidth; x++) 
     { 
      newRow.append(jqOldCells.eq((oldWidth*x)+y)); 
     } 
     newTbody.append(newRow); 
    } 

    tbody.replaceWith(newTbody);   
} 

Note: - richiede Jquery - Non testato su grandi tavoli molto - probabilmente merda su tabelle con colonne occupate/righe - Probabilmente schifo sui tavoli con qualsiasi combinazione di thead/th

Quindi, se le tabelle non hanno celle spanning e non usa thead/th, dovrebbe essere utile.

Answer 3

Questa è una soluzione, in questo caso questo era per cellulari e tablet, rimuovere le query multimediali e la posizione assoluta e tu ce l'hai!

sulla base di questo:

table, thead, tbody, th, td, tr { 
display: block; 
} 

http://css-tricks.com/responsive-data-tables/