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  
37
Reddy 9 jun. 2011 a las 22:37

4 respuestas

La mejor respuesta

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;
});
41
svinto 9 jun. 2011 a las 19:19

¿En qué idioma quieres hacerlo? Asumo JavaScript, como dijiste jQuery. (jQuery no es un idioma, es una biblioteca para un idioma)

Necesita encontrar una manera 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 una sola matriz plana.

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

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

Por último, debe dividir la matriz en las columnas y filas apropiadas y volver a generar el HTML.

¡Ver! No es tan dificil. El diseño ya está hecho para usted, todo lo que necesita es implementarlo. (Tal vez no debería hacer tanto trabajo por ti ...)

4
Pwnna 9 jun. 2011 a las 18:43

Hay una solución CSS de David Bushell (usando flexbox): http://dbushell.com/2016/03/04/css- only-responsive-tables /

Y también existe esta solución CSS (usando float)

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

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

(ambos se mencionan en esta respuesta: Tabla HTML con filas verticales)

21
Community 23 may. 2017 a las 11:46

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/

10
Stefan Kendall 9 jun. 2011 a las 19:05