求表格排序，每一列都可以降序以及升序

<html>
<head>
<title>htc演示</title>
<script language="JavaScript">
function doSort() {
var oE = window.event.srcElement;
for (var i=0;i<oE.rows[oE.headindex].cells.length;i++) {
oE.rows[oE.headindex].cells[i].children[1].innerText = "";
}
oE.rows[oE.headindex].cells[window.event.sortIndex].children[1].innerText = window.event.sortOrder ? "▲" : "▼";
}
</script>
</head>
<body>
<div style="text-align:center;font-size:14pt;font-weight:bold">表格系列操作之－sortrow1.0演示</div>
<table style="behavior:url(sortrow.htc);border:1px solid red" width="100%" headindex="0" begin="1" end="0" onsort="doSort()">
<tr>
<td data-type="int" width="100px"><span>整数</span><span></span></td>
<td width="100px"><span>字符串</span><span></span></td>
<td data-type="float" width="100px"><span>浮点数</span><span></span></td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1.1</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>2.1</td>
</tr>
<tr>
<td>10</td>
<td>10</td>
<td>10.1</td>
</tr>
</table>
</body>
</html>

解决方案 »

  1.   

    sort.htc<public:attach  event=oncontentready onevent="init();" /><script>
    //
    // global variables
    //
    var tbody=null;
    var theadrow=null;
    var colCount = null;
    var reverse = false;
    var lastclick = -1; // stores the object of our last used objectvar oTR = null;
    var oStatus = null;
    var none = 0;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;
    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);
    }}//
    // 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
                }
            }
        }
    }</script>
    1.html
    <TABLE style="behavior:url(sort.htc);" border=1>
    <thead><tr><td>id</td><td>name</td></tr></thead>
    <tbody>
    <tr><td>1</td><td>b</td></tr>
    <tr><td>2</td><td>d</td></tr>
    </tbody>
    </table>