css and html columns - flip table

Question

I am trying to find a way to easily flip (transpose, rotate) a HTML table including moving the attributes to tags. According to http://quirksmode.org/css/css2/columns.html I can only use border, background, width and visibilty in ... is this still valid? And what about class names and event handlers that I have on the table rows?

There are also draggable columns (using jQuery-UI). Will I have to reinitialize them after flipping?

Is there any jQuery-UI plugin that takes care of all the stuff?

Are you talking about doing something [like this](https://support.office.com/en-us/article/Transpose-rotate-data-from-rows-to-columns-or-vice-versa-3419f2e3-beab-4318-aae5-d0f862209744) but using an html table? — Jeremy Iglehart, Jun 26 '16 at 11:50
Need more info or an example. If the column / row is being moved but the cell elements are the same, draggable may still be effective. If you're allowing the columns to be draggable, after the swap, are they new columns? If so, draggable should be destroyed and created when the swap happens. — Twisty, Jun 27 '16 at 20:19

score 1 · Answer 1 · edited May 23 '17 at 10:30

It looks to me as if this stack overflow question might scratch your same itch.

Here's the js fiddle mentioned in that question's answer: http://jsfiddle.net/CsgK9/2/ - I did not write this, the credit goes to: svinto

Copied the contents of that jsfiddle to this code snippet.

Hope this helps.

$("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;
});

td { padding:5px; border:1px solid #ccc;}
.red { color: red; }
.border td { border: 1px solid black; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr>
        <td class="red">1</td>
        <td class="red">4</td>
        <td class="red">7</td>
    </tr>
    <tr class="border">
        <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>

Notice that classes put on the <tr> do get pulled off. So there is room for improvement on this answer.

This method might be closer to what you're looking for - it is another approach worth mentioning. Credit goes to Stefan Kendall

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

.red { color: red; }
.border { border: 2px solid black; }
.blue { color: blue; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tbody>
        <tr>
           <td class="red">01</td><td class="red">02</td><td class="red">03</td><td>04</td> 
        </tr> 
        <tr class="blue">
           <td class="border">05</td><td class="border">06</td><td class="border">07</td><td class="border">08</td>
        </tr>
         <tr>
           <td>09</td><td>10</td><td>11</td><td>12</td>
        </tr>  
        <tr>
            <td>13</td><td>14</td><td>15</td><td>16</td>
        </tr>
    </tbody>
</table>

In both of these examples, so long as you keep the css classes on the <td> it will move over without a problem. I've noticed the <tr> are losing their attributes. With some small modification, I'm pretty sure you could move those also.

Hopefully this gets you closer to your goal.

css and html columns - flip table

1 Answers1