续

tableact.htc
<public:event    name="onrowselect" id=rowselect />
<public:property name="hlcolor" />
<public:property name="slcolor" />
<public:property name=dragcolor />

<public:attach event="ondetach" onevent="cleanup()" />
<public:attach     event=oncontentready onevent="init();" />

<script language=jscript>

var currrow = -1;
var selrow = -1;

if (element.tagname == table)
{
    element.attachevent(onmouseover, onmouseover);
    element.attachevent(onmouseout, onmouseout);
    element.attachevent(onclick, onclick);
}
else
{
    alert("error: tableact not attached to a table element");
}

function cleanup()
{
    hilite(-1);

    element.detachevent(onmouseover, onmouseover);
    element.detachevent(onmouseout, onmouseout);
    element.detachevent(onclick, onclick);
}

function onclick()
{
    srcelem = window.event.srcelement;

    //crawl up the tree to find the table row
    while (srcelem.tagname != "tr" && srcelem.tagname != "table")
        srcelem = srcelem.parentelement;

    if(srcelem.tagname != "tr") return;

    if(srcelem.rowindex == 0 ) return;

    if (selrow != -1) selrow.runtimestyle.backgroundcolor = ;

    srcelem.runtimestyle.backgroundcolor = slcolor;
    selrow = srcelem;
    
    var oevent     = createeventobject();
    oevent.selected = selrow;
    rowselect.fire(oevent);
}

function onmouseover()
{
    srcelem = window.event.srcelement;
    //crawl up to find the row
    while (srcelem.tagname != "tr" && srcelem.tagname != "table")
        srcelem = srcelem.parentelement;

    if(srcelem.tagname != "tr") return;

    if (srcelem.rowindex > 0)
        hilite(srcelem);
    else
        hilite(-1);

}

function onmouseout()
{
    // make sure we catch exit from the table
    hilite(-1, -1);
}

function hilite(newrow)
{
    if (hlcolor != null )
    {
        if (currrow != -1 && currrow!=selrow)
        {
            currrow.runtimestyle.backgroundcolor = ;
        }

        if (newrow != -1 && newrow!=selrow)
        {
            newrow.runtimestyle.backgroundcolor = hlcolor;
        }
    }
    currrow = newrow;
}

/// sort
//
// global variables
//
var tbody=null;                    
var theadrow=null;
var colcount = null;

var reverse = false;
var lastclick = -1;                    // stores the object of our last used object

var arrhittest = new array();
var bdragmode = false;
var objdragitem;
var arrhittest = new array();
var iarrayhit = false;

function init() {

    // get tbody – take the first tbody for the table to sort
    tbody = element.tbodies(0);
    if (!tbody) return;

    //get thead  
    var thead = element.thead;
    if (!thead)  return;
    
    theadrow = thead.children[0]; //assume just one head row
    if (theadrow.tagname != "tr") return;

    theadrow.runtimestyle.cursor = "hand";

    colcount = theadrow.children.length;
    var l, clickcell;
  var cx=0;
  var cy=0;
  var c;

    for (var i=0; i<colcount; i++)
    {
        // create our blank gif
        l=document.createelement("img");
        l.src="dude07232001blank.gif";
        l.id="srtimg";
        l.width=25;
        l.height=11;

        clickcell = theadrow.children[i];
        clickcell.selectindex = i;
        clickcell.insertadjacentelement("beforeend", l)
        clickcell.attachevent("onclick", doclick);

        arrhittest[i] = new array();

        c = clickcell.offsetparent;

       if(cx == 0 && cy == 0 )
       {
            while (c.offsetparent != null) {
                  cy += c.offsettop;
                  cx += c.offsetleft;
                  c = c.offsetparent;
        }
    }

    arrhittest[i][0] = cx + clickcell.offsetleft;
    arrhittest[i][1] = cy + clickcell.offsettop;
    arrhittest[i][2] = clickcell;
    arrhittest[i][3] = cx + clickcell.offsetleft + eval(clickcell.width);

    clickcell.attachevent("onmousedown",onmousedown);
    }

  defaulttitlecolor = theadrow.children[0].currentstyle.backgroundcolor;     

  element.document.attachevent("onmousemove",onmousemove);
  element.document.attachevent("onmouseup",onmouseup);
  element.document.attachevent("onselectstart",onselect);
}

//
// doclick handler
//
//
function doclick(e)
{
    var clickobject = e.srcelement;

    while (clickobject.tagname != "td")
    {
        clickobject = clickobject.parentelement;
    }

    
    // clear the sort images in the head
    var imgcol= theadrow.all(srtimg);
    for(var x = 0; x < imgcol.length; x++)
        imgcol[x].src = "dude07232001blank.gif";

    if(lastclick == clickobject.selectindex)
    {
        if(reverse == false)
        {
            clickobject.children[0].src = "dude07232001down.gif";
              reverse = true;
        }
        else
        {
            clickobject.children[0].src = "dude07232001up.gif";
            reverse = false;
        }
    }
    else
    {
        reverse = false;
        lastclick = clickobject.selectindex;
        clickobject.children[0].src = "dude07232001up.gif";
    }

    insertionsort(tbody, tbody.rows.length-1,  reverse, clickobject.selectindex);
}

function insertionsort(t, irowend, freverse, icolumn)
{
    var irowinsertrow, irowwalkrow, current, insert;
    for ( irowinsert = 0 + 1 ; irowinsert <= irowend ; irowinsert++ )
    {
        if (icolumn) {    
        if( typeof(t.children[irowinsert].children[icolumn]) != "undefined")
                   textrowinsert = t.children[irowinsert].children[icolumn].innertext;
        else
            textrowinsert = "";
        } else {
           textrowinsert = t.children[irowinsert].innertext;
        }
        
        for ( irowwalk = 0; irowwalk <= irowinsert ; irowwalk++ )
        {
            if (icolumn) {
            if(typeof(t.children[irowwalk].children[icolumn]) != "undefined")
                textrowcurrent = t.children[irowwalk].children[icolumn].innertext;
            else
                textrowcurrent = "";
            } else {
            textrowcurrent = t.children[irowwalk].innertext;
            }

        //
        // we save our values so we can manipulate the numbers for
        // comparison
        //
        current = textrowcurrent;
        insert  = textrowinsert;

        //  if the value is not a number, we sort normally, else we evaluate    
        //  the value to get a numeric representation
        //
        if ( !isnan(current) ||  !isnan(insert))
        {
            current= eval(current);
            insert= eval(insert);
        }
        else
        {
            current    = current.tolowercase();
            insert    = insert.tolowercase();
        }

            if ( (   (!freverse && insert < current)
                 || ( freverse && insert > current) )
                 && (irowinsert != irowwalk) )
            {
            erowinsert = t.children[irowinsert];
                erowwalk = t.children[irowwalk];
                t.insertbefore(erowinsert, erowwalk);
                irowwalk = irowinsert; // done
            }
        }
    }
}

/// drag

function initheader()
{
  var cx=0;
  var cy=0;
  var c;
     
  for (i=0; i<colcount ; i++) {

    var clickcell = theadrow.children[i];
    clickcell.selectindex = i;
    c = clickcell.offsetparent;

    if(cx == 0 && cy == 0 )
    {
        while (c.offsetparent != null) {
                  cy += c.offsettop;
                  cx += c.offsetleft;
                  c = c.offsetparent;
        }
    }

    arrhittest[i][0] = cx + clickcell.offsetleft;
    arrhittest[i][1] = cy + clickcell.offsettop;
    arrhittest[i][2] = clickcell;
    arrhittest[i][3] = cx + clickcell.offsetleft + eval(clickcell.width);
  }
}

function onselect()
{
    //disable selection
    return false;
}

function changeheader(ichange)
{
    for(var y = 0; y < arrhittest.length; y++)
    {
    if (arrhittest[y][2].currentstyle.backgroundcolor == dragcolor)
        arrhittest[y][2].style.backgroundcolor = defaulttitlecolor;
    }

    if(ichange == "-1") return;

    arrhittest[ichange][2].style.backgroundcolor = dragcolor;
}

function onmouseup(e)
{
    if(!bdragmode)    return;
    bdragmode = false;

    var iselected = objdragitem.selectindex;
    
    objdragitem.removenode(true);
    objdragitem = null;

    changeheader(-1);

    if( (iarrayhit – 1) < 0 || iselected < 0) return;    // default faliure

    copyrow(iselected, (iarrayhit – 1) );

    // reset our variables
    iselected = 0;
    iarrayhit = -1;
}

function onmousedown(e)
{
    bdragmode     = true;
    var src     = e.srcelement;
    var c     = e.srcelement;

    while (src.tagname != "td")
        src = src.parentelement;

    // create our header on the fly
    objdragitem = document.createelement("div");
    objdragitem.innerhtml        = src.innerhtml;
    objdragitem.style.height    = src.currentstyle.height;
    objdragitem.style.width     = src.currentstyle.width;
    objdragitem.style.background     = src.currentstyle.backgroundcolor;
    objdragitem.style.fontcolor    = src.currentstyle.fontcolor;
    objdragitem.style.position     = "absolute";
    objdragitem.selectindex        = src.selectindex;
    while (c.offsetparent != null)
        {
        objdragitem.style.y += c.offsettop;
        objdragitem.style.x += c.offsetleft;
        c = c.offsetparent;
    }
     objdragitem.style.borderstyle    = "outset";
    objdragitem.style.display    = "none";

    src.insertbefore(objdragitem);
}

function onmousemove(e)
{
    if(!bdragmode || !objdragitem) return;    // if we arent dragging or our object
                                // is null, we return

    // hardcoded value for height difference
    var midwobj = objdragitem.style.poswidth / 2;
    var midhobj = 12;

    // save mouses position in the document
     var inttop = e.clienty + element.document.body.scrolltop;
     var intleft = e.clientx + element.document.body.scrollleft;

    var cx=0,cy=0;
    var elcurrent = objdragitem.offsetparent;
               while (elcurrent.offsetparent != null) {
                  cx += elcurrent.offsettop;
                  cy += elcurrent.offsetleft;
                  elcurrent = elcurrent.offsetparent;
               }

      objdragitem.style.pixeltop  = inttop  – cx – midhobj;
      objdragitem.style.pixelleft = intleft – cy – midwobj;

    if(objdragitem.style.display == "none") objdragitem.style.display = "";

    iarrayhit = checkhit(inttop , intleft , e);

    e.cancelbubble = false;
    e.returnvalue = false;
}

function checkhit(x,y,e)
{
    midwobj = objdragitem.style.poswidth / 2;
    midhobj = 12;

    if( ((x) > (arrhittest[0][1] + 20) ) || ( (x) < (arrhittest[0][1]) ) )
    {
        changeheader(-1);
        return -1;
    }

    for(var i=0; i < colcount; i++)
    {
        if( (y) > (arrhittest[i][0]) && (y) < (arrhittest[i][3] )) //+ 100))
        {
            changeheader(i);
            return i + 1;
        }
    }
    return -1;
}

//
// copy from row to row.. does the header also.
//
function copyrow(from, to)
{    
    if(from == to) return;

    var origfrom = from;
    var origto = to;
    var idiff = 0;

    if( from > to )
    {

        idiff = from – to;

        var saveobj     = theadrow.children[from].innerhtml;
        var savewidth     = theadrow.children[from].width;

        for(var i = 0 ; i < idiff; i++)
        {
            theadrow.children[from].innerhtml = theadrow.children[from – 1].innerhtml;
            theadrow.children[from].width = theadrow.children[from – 1].width;
            from–;
        }
        theadrow.children[to].innerhtml     = saveobj;
        theadrow.children[to].width = savewidth;
        
    }
    else
    {

        idiff = to – from;

        var saveobj = theadrow.children[from].innerhtml;
        var savewidth     = theadrow.children[from].width;

        for(var i = 0 ; i < idiff; i++)
        {
            theadrow.children[from].innerhtml = theadrow.children[from + 1].innerhtml;
            theadrow.children[from].width = theadrow.children[from + 1].width;
            from++;
        }

        theadrow.children[to].innerhtml     = saveobj;
        theadrow.children[to].width = savewidth;
    }

    for(var i = 0 ; i < theadrow.children.length; i++)
            theadrow.children[i].selectindex = i;

    initheader();
    for ( var irowinsert = 0 ; irowinsert < tbody.rows.length; irowinsert++ )
    {
        from = origfrom;
        to = origto;
        if( from > to )
        {
            idiff = from – to;
            var saveobj = tbody.children[irowinsert].children[from].innerhtml
            for(var i = 0 ; i < idiff; i++)
            {
                tbody.children[irowinsert].children[from].innerhtml = tbody.children[irowinsert].children[from – 1].innerhtml;
                from–;
            }
            tbody.children[irowinsert].children[to].innerhtml = saveobj;

        }
        else
        {
            idiff = to – from;
            var saveobj = tbody.children[irowinsert].children[from].innerhtml
            for(var i = 0 ; i < idiff; i++)
            {
                tbody.children[irowinsert].children[from].innerhtml = tbody.children[irowinsert].children[from + 1].innerhtml;
                from++;
            }
            tbody.children[irowinsert].children[to].innerhtml = saveobj;
        }
    }
}

</script>

相关图片:
1.
2.
3.

所有文件放在一个目录下