如何反转（转置）HTML表格的行和列？ [英] How to invert (transpose) the rows and columns of an HTML table?

问题描述

我想转置HTML表格中的行和列，即行为列，列为行。

I want to transpose the rows and columns in an HTML table, i.e. Rows as Columns, Columns as Rows.

我可以做什么？

例子：

Example :

1 4 7  
2 5 8  
3 6 9

as

as

1 2 3  
4 5 6  
7 8 9  

推荐答案

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

html：

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

这篇关于如何反转（转置）HTML表格的行和列？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！