NoFunc | Table Organize

This script basically allows you to do three things:

Re-organize the rows
Re-organize the columns
Browse the table using the up/down arrows.

Example: Internal Link — example is also using Table Sort()

JAVASCRIPT

function $(v) { return(document.getElementById(v)); }
function $T(v,i) { return((typeof(i)=='string'?$(i):(i?i:document)).getElementsByTagName(v)); }
function agent(v) { return(Math.max(navigator.userAgent.toLowerCase().indexOf(v),0)); }
function inArray(v,r) { for(var i in r) if(r[i]==v) return true; } 
function iSW(w,n) { if($(w)) $(w).id=''; if(n) n.id=w; }

/* TBODY */

function trMAP(a,b,z) { var s=a%2?0:1; for(var i=a?a:0; i<=(b?b:Trl); i++) { Tr[i].className=(s=!s)?'even':'odd'; Tr[i].cells[0].innerHTML=i+1; if(z) trMouse(Tr[i]); } }
function trMV(w,n) { w-=1; n-=1; var b=n<=w?n+1:n-1, z=Tb.replaceChild(Tr[w],Tr[n]); Tb.insertBefore(z,Tr[b]); trMAP(Math.min(w,n),Math.max(w,n)); }
function trRM(o) { var v=o.rowIndex; T.deleteRow(v); Tr[v-1].id='this'; Trl-=1; trMAP(v-1); }
function trMouse(o) {

    o.onclick=function(){ if(stop) return false; };
    o.onmousedown=function(){ stop=1; iSW('this',this); document.onmouseup=function(){ var v=$('hover'); if(v) { v.id=''; trMV($('this').rowIndex,v.rowIndex); } stop=0; }; };
    o.onmouseover=function(){ iSW('hover',(stop && this.id!='this')?this:''); };

}

/* THEAD */

function thMV(w,n) { var r=T.rows,v='',b='',z='';

    for(var i=0; i<r.length; i++) { v=r[i].cells; SW(v[w],v[n],'innerHTML'); if(i==0) { SW(v[w],v[n],'style.width'); } }

}

function thMouse(r,R) {

    for(var i=0; i<r.length; i++) { if((R && !inArray(i,R)) || !R) {

        r[i].onclick=function() { resortTable(this,this.cellIndex); if(this.cellIndex!=0) trMAP(0); };
        r[i].onmousedown=function() { stopTH=1; iSW('thisTH',this); document.onmouseup=function() { var v=$('hoverTH'); if(v) { v.id=''; thMV($('thisTH').cellIndex,v.cellIndex); } stopTH=0; }; };
        r[i].onmouseover=function() { iSW('hoverTH',(stopTH && this.id!='thisTH')?this:''); };

    } }
}

function SW(w,n,v) { function f(a,b) { return(eval("a."+v+(b?"='"+b+"'":'')+";")); }; var z=f(n); f(n,f(w)); f(w,z); }

/* KEY STROKE */

function mkTime(v) { var z=new Date().getTime(v); return(z); }
function kCode(e) { var k=agent('opera')?e.kCode:(agent('msie')?event.keyCode:e.which); return(k); }
function kRun(e,r,fn) { var k=kCode(e); if(inArray(k,r) && !stopK[1]) { stopK=Array('',mkTime()); kStop(k,fn); } }
function kStop(k,fn) { if(!stopK[0]) { if(fn) fn(k); setTimeout("kStop('"+k+"',"+fn+")",120/((mkTime()-stopK[1]>500)?3:1)); } else { stopK[1]=''; } }

document.onkeydown=function(e){ kRun(e,Array(37,38,39,40),function(k) { var v=((k==40||k==39)?1:-1); iSW('this',Tr[Math.min(Trl,Math.max(0,$('this').rowIndex+v-1))]); }); };
document.onkeyup=function(){ stopK[0]=1; };

/* GLOBALS */

var T=$('table'), Tb=T.tBodies[0], Tr=Tb.rows, Trl=Tr.length-1, stop=0, stopTH=0, stopK='', cur=''; trMAP(0,'',1); thMouse($T('th','head'),Array(0,6));

CSS

#table { font-family: Arial, sans-serif; font-size: 11px; -moz-user-select: none; -khtml-user-select: none; user-select: none; width: 100%; CURSOR: default; }
#table th#hoverTH { background: #555; }
#table th { TEXT-ALIGN: left; PADDING: 4px 0 4px 9px; BACKGROUND: #666; BORDER-BOTTOM: 1px solid #444; BORDER-TOP: 1px solid #444; BORDER-LEFT: 1px solid #555; COLOR: #FFF; CURSOR: pointer; }
#table tr#this td { background-color: #3d80df; color: #FFF; font-weight: bold; border-left: 1px solid #346DBE; border-bottom: 1px solid #3E6FB3; border-top: 1px solid #3E6FB3; BORDER-RIGHT: 1px solid #5886C7; }
#table tr#hover td { background-color: #777; color: #FFF; border-left: 1px solid #888; border-bottom: 1px solid #888; border-top: 1px solid #888; BORDER-RIGHT: 1px solid #777; }
#table tr td { padding: 3px 8px; border-left: 1px solid #D9D9D9; border-top: 1px solid #FFF; border-bottom: 1px solid #FFF; }
#table tr.even td { BACKGROUND: #edf3fe; BORDER-BOTTOM: 1px solid #E8F0FF; BORDER-TOP: 1px solid #E8F0FF; BORDER-RIGHT: 1px solid #FFF; }
#table tr.odd td { BACKGROUND: #FFF; BORDER-BOTTOM: 1px solid #FFF; BORDER-TOP: 1px solid #FFF; BORDER-RIGHT: 1px solid #FFF; }

HTML

<table id="table" cellspacing="0" onselectstart="return false">
 <thead>
  <tr class="asc" id="head"><th style="width: 25px">#</th><th style="width: 350px">Title</th><th>Artist</th><th style="width: 150px">Time</th><th style="width: 150px">Rating</th><th style="width: 17px;">&nbsp;</th></tr>
 </thead>
 <tbody id="tbody">
  <tr><td>1</td><td>High Hopes</td><td>Pink Floyd</td><td>6:59</td><td>★★★★★</td><td onclick="trRM(this.parentNode);">x</td></tr>
  <tr><td>2</td><td>Reflection</td><td>Tool</td><td>12:07</td><td>★★★★★</td><td onclick="trRM(this.parentNode);">x</td></tr>
  <tr id="this"><td>3</td><td>Tubular Bells</td><td>Mike Oldfield</td><td>25:35</td><td>★★★★</td><td onclick="trRM(this.parentNode);">x</td></tr>
 </tbody>
</table>