Cómo invertir (transponer) las filas y columnas de una tabla HTML?

Question

Quiero transponer las filas y columnas en una tabla HTML, es decir, Filas como columnas, Columnas como filas.

¿De qué manera puedo hacerlo?

Ejemplo:

1 4 7 
2 5 8 
3 6 9 

como

1 2 3 
4 5 6 
7 8 9 

Answer 1

http://jsfiddle.net/CsgK9/2/

html:

<table> 
    <tr> 
     <td>1</td> 
     <td>4</td> 
     <td>7</td> 
    </tr> 
    <tr> 
     <td>2</td> 
     <td>5</td> 
     <td>8</td> 
    </tr> 
    <tr> 
     <td>3</td> 
     <td>6</td> 
     <td>9</td> 
    </tr> 
</table> 


<p><a href="#">Do it.</a></p> 

JS:

$("a").click(function(){ 
    $("table").each(function() { 
     var $this = $(this); 
     var newrows = []; 
     $this.find("tr").each(function(){ 
      var i = 0; 
      $(this).find("td").each(function(){ 
       i++; 
       if(newrows[i] === undefined) { newrows[i] = $("<tr></tr>"); } 
       newrows[i].append($(this)); 
      }); 
     }); 
     $this.find("tr").remove(); 
     $.each(newrows, function(){ 
      $this.append(this); 
     }); 
    }); 

    return false; 
}); 

Answer 2

¿Qué idioma se quiere hacer en? Supongo que JavaScript, como dijiste jQuery. (jQuery no es un idioma, es una biblioteca para un idioma)

Debe encontrar una forma de representar la tabla como una estructura de datos. Esto debe hacerse a través de OOP por simplicidad. Le recomiendo que obtenga el número de columnas y filas y coloque los datos en 1 única matriz plana.

También necesita diseñar algo que analice el HTML y obtenga la tabla, convirtiéndola en su estructura, lo que permite realizar cálculos fácilmente. Esto se puede hacer a través del método de jQuery.

Luego necesita encontrar una función de clasificación que ordene la matriz plana.

Por último, debe dividir la matriz en las columnas y filas apropiadas y volver a enviar el código HTML.

See! No es tan difícil. El diseño está prácticamente hecho para ti, todo lo que necesitas es implementarlo. (Tal vez no debería hacer tanto trabajo para ti ...)

Answer 3

Esto debería funcionar para HTML arbitrario:

function swap(cells, x, y){ 
    if(x != y){  
    var $cell1 = cells[y][x]; 
    var $cell2 = cells[x][y]; 
    $cell1.replaceWith($cell2.clone()); 
    $cell2.replaceWith($cell1.clone()); 
    } 
} 

var cells = []; 
$('table').find('tr').each(function(){ 
    var row = []; 
    $(this).find('td').each(function(){ 
     row.push($(this));  
    }); 
    cells.push(row); 
}); 

for(var y = 0; y <= cells.length/2; y++){ 
    for(var x = 0; x < cells[y].length; x++){ 
     swap(cells, x, y); 
    } 
} 

violín de trabajo:

http://jsfiddle.net/Hskke/1/

Answer 4

hay esta una solución CSS por David Bushell (usando FlexBox): http://dbushell.com/2016/03/04/css-only-responsive-tables/

y hay también esta solución CSS (mediante flotador)

tr { display: block; float: left; } 
th, td { display: block; } 

http://jsfiddle.net/XKnKL/3/

(ambos se mencionan en esta respuesta: HTML Table with vertical rows)

Answer 5

Tengo problema similar pero quiero incorporar tabla

$("table.cennik").each(function() { 
 
     var $this = $(this); 
 
     var newrows = []; 
 
     $('#summaryProductName, #pcalPricelistName').remove(); 
 
\t \t $(this).find('th').removeAttr('rowspan').removeAttr('colspan'); 
 
\t \t $this.find('th').eq(1).attr('rowspan','2'); 
 
     $this.find("tr").each(function(){ 
 
      var i = 0; 
 
      $(this).find("td,th").each(function(){ 
 
       i++; 
 
       if(newrows[i] === undefined) { newrows[i] = $("<tr></tr>"); } 
 
       newrows[i].append($(this)); 
 
      }); 
 
     }); 
 
     $this.find("tr").remove(); 
 
     $.each(newrows, function(){ 
 
      $this.append(this); 
 
     }); 
 
    });

td { border: 1px solid #929292;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
 
<table id="1_1" class="cennik ui-table" style="float:left; margin-right: 20px;" cellspacing="0"> 
 
<tbody> 
 
    <tr> 
 
    <th rowspan="2">Quantity </th> 
 
    <th colspan="2">Price</th> 
 
    </tr> 
 
    <tr> 
 
    <td id="spCalPricelistName"> First price </td> 
 
    <td id="spCalPricelistName"> Second price </td> 
 
    </tr> 
 
    <tr> 
 
    <td>1 - 2</td> 
 
    <td>15 zł</td> 
 
    <td>20 zł</td> 
 
    </tr> 
 
    <tr> 
 
    <td>3 - 9</td> 
 
    <td>12 zł</td> 
 
    <td>17,50 zł</td> 
 
    </tr> 
 
    <tr> 
 
    <td>10+</td> 
 
    <td>10 zł</td> 
 
    <td>15 zł</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

y esto no funciona para tablas con colspan y rowspan en celdas de la tabla.

he intentado eliminar esta atributos y todavía tengo ni idea de cómo tirar celda "Primer premio" remar con d Precio