Invert a Table - jQuery

by syjsdev

HTML

<table>
    <tr>
        <th></th>
        <th>One</th>
        <th>Two</th>
        <th>Three</th>
    </tr>
    <tr>
        <td>First</td>
        <td>4</td>
        <td>7</td>
        <td>10</td>
    </tr>
    <tr>
        <td>Second</td>
        <td>5</td>
        <td>8</td>
        <td>11</td>
    </tr>
    <tr>
        <td>Third</td>
        <td>6</td>
        <td>9</td>
        <td>12</td>
    </tr>
</table>


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

CSS

td { padding:5px; border:1px solid #ccc;}

th { background-color: silver; }

JavaScript

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