关于JAVASCRIPT的表格排序问题！

Question

http://webfx.eae.net/dhtml/sortabletable/demo.html参考这个例子。

Answer 1

两个文件，放在同一目录下，同时还需要三张标志性图片，分别表示没排序、升序、降序三种状态：
sort.htc文件内容：
//////////////////////////////////////////////////////////
<public:attach  event=oncontentready onevent="init();" />
<script>
var tbody=null;
var theadrow=null;
var colCount = null;
var reverse = false;
var lastclick = -1;
var oTR = null;
var oStatus = null;
var none = 0;function init() {
tbody = element.tBodies(0);
if (!tbody) return;
var thead = element.tHead;
if (!thead)  return;
theadrow = thead.children[0];//要以第二行的话，中括号内的数字填“1”，依此类推
if (theadrow.tagName != "TR") return;
theadrow.runtimeStyle.cursor = "hand";
colCount = theadrow.children.length;
var l, clickCell;
for (var i=0; i<colCount; i++) 
{
l=document.createElement("IMG");
l.src="sort1.gif";  //sort1.gif、sort2.gif、sort3.gif分别是未排序、升序、降序三种状态的标志图片
l.id="srtImg";
l.width=15;
l.height=15;
clickCell = theadrow.children[i];
clickCell.selectIndex = i;
clickCell.insertAdjacentElement("beforeEnd", l)
clickCell.attachEvent("onclick", doClick);
}
}function doClick(e) 
{
var clickObject = e.srcElement;
while (clickObject.tagName != "TD") 
{
clickObject = clickObject.parentElement;
}
var imgcol= theadrow.all('srtimg');
for(var x = 0; x < imgcol.length; x++) 
imgcol[x].src = "sort1.gif";
if(lastclick == clickObject.selectIndex)
{
if(reverse == false)
{
clickObject.children[0].src = "sort2.gif";
      reverse = true;
}
else 
{
clickObject.children[0].src = "sort3.gif";
reverse = false;
}
}
else
{
reverse = false;
lastclick = clickObject.selectIndex;
clickObject.children[0].src = "sort3.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;
            }
current = textRowCurrent;
insert  = textRowInsert;
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; 
            }
        }
    }
}</script>
////////////////////////////////////////////////////////////////////////////////
table.html文件：
//////////////////////////////////////////////////////////////////////////
<table border='1' cellpadding='0' cellspacing='0' style='behavior:url(sort.htc);border-collapse: collapse;' bordercolor='#111111' width='800'  id='AutoNumber1'>
    <thead><!--表头不排序，控制部份，如果有多行，要结合更改上面的htc文件//-->
       <tr>
<td align='center' width='30'>filedA</td>
<td align='center' width='30'>filedB</td>
<td align='center' width='100'>filedC</td>
</tr>
      </thead>
      <tbody><!--表格主体，排序部份//-->
         <tr id='w1' onmouseover="javascript:this.bgColor='#ccccff';"onmouseout="javascript:this.bgColor='';">
<td align='center'>1</td>
<td align='center'>b</td>
<td align='center'>一</td>
       </tr>
         <tr id='w2' onmouseover="javascript:this.bgColor='#ccccff';"onmouseout="javascript:this.bgColor='';">
<td align='center'>3</td>
<td align='center'>c</td>
<td align='center'>二</td>
       </tr>
         <tr id='w3' onmouseover="javascript:this.bgColor='#ccccff';"onmouseout="javascript:this.bgColor='';">
<td align='center'>4</td>
<td align='center'>f</td>
<td align='center'>四</td>
       </tr>
      </tbody>
      <tfoot><!--表脚，不排序部份//-->
        <tr id='w4' onmouseover="javascript:this.bgColor='#ccccff';""onmouseout=javascript:this.bgColor='';">
<td align='center'>8</td>
<td align='center'>h</td>
<td align='center'>三</td>
       </tr>
      </tfoot>
    </table>

Answer 2

qiqunet,文件 sort.htc 是全名吗？我怎么测验没有成功啊？？谢谢！！

Answer 3

两个代码文件：sort.htc、table.htm三个小图片文件：sort1.gif、sort2.gif、sort3.gif两个代码文件中的代码已在上文给出，你分别粘贴到空白的记事本中，然后分别命名为“sort.htc”和“table.htm”，粘贴时注意去除上文中那些成行的斜杠。
其中，你初次测试时，文件名“sort.htc、sort1.gif、sort2.gif、sort3.gif”均不能更改，因为都被其中的代码引用了。
你试过能用后再根据注释部份更改。代码是肯定行的，我试过的了。