Dynamically Flip a Table (Interchange Rows and Columns)

Got a big table in a web page and would rather look at it with the rows and columns exchanged? i.e. If the headers are along the top, you’d rather they were along the left. Use this bookmarklet which asks for a (jQuery) CSS selector. The default CSS selector of “table” will flip the axes of every table on the page.


If you don’t trust bookmarkify.it (but you do trust Google for the jQuery CDN), here’s some safe code:

javascript:var s=document.createElement('script');s.setAttribute('src','//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js');document.getElementsByTagName('body')[0].appendChild(s);$(function(){javascript:$(prompt("Flip Table(s) with CSS selector","table")).each(function(){var e=[];$(this).find("tr").each(function(){var t=[];$(this).find("td,th").each(function(){t.push($(this))});e.push(t)});$(this).empty();var t=0;while(true){foundOne=false;var n=$("<tr/>");for(var r=0;r<e.length;r++){if(e[r].length>t){e[r][t].appendTo(n);foundOne=true}else{$("<td/>").appendTo(n)}}if(!foundOne){break}n.appendTo($(this));t++}})});


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: