Convertir las columnas TD en filas TR

Question

¿Hay una manera rápida de traducir (usando CSS o Javascript) un TD tablas en TR, actualmente tengo:

A B C D 
1 2 3 4 

y quiero traducir en:

A 1 
B 2 
C 3 
D 4 

??

Answer 1

Usted quiere dar vuelta HTML dispuesto así:

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

En esto:

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

correcta?

Puede hacerlo con Javascript, sin embargo, es difícil sugerir un método sin saber más sobre la estructura de su sitio/archivos HTML. Voy a darle una oportunidad.

Asumiendo que su etiqueta <table> viene con un id (como este: <table id="myTable"> puede acceder a él en javascript de esta manera:

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

se puede crear una nueva tabla como la siguiente:

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

Ahora que necesita para transponer las filas antiguas tablas en las nuevas tablas de columnas:

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

Esto debería hacer lo que necesita. Se prevenido: no probado. Trabajar este código de JavaScript en una página HTML se deja como un ejercicio para el lector. Si alguien detecta algún error que omití, me complacerá si me lo señala o simplemente edita para reparar :)

Answer 2

Aquí hay una función probada que transpondrá una tabla, y conservará cualquier formato/evento que habían enganchado a cualquier elemento dentro de la tabla (es decir: onclicks sobre el contenido de celdas o células)

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

Notas: - Requiere Jquery - No probado en muy grandes mesas - probablemente basura fuera en las tablas con columnas extendidos/rows - Probablemente caiga en las tablas con cualquier combinación de thead/th

Por lo tanto, siempre y cuando sus tablas no tengan celdas extendidas y no use thead/th, debería estar listo.

Answer 3

Esta es una solución, en este caso, esto fue para móviles y tabletas, elimina las consultas de medios y la posición absoluta y lo tienes!

basado en esto:

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

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