網上有很多很多用js對表格進行排序的例子，比如說http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dndude/html/dude07232001.asp
這個是微軟的3個表格操作的例子，都做成了htc組件了
但是有個問題就是在mozilla等非IE瀏覽器下面都不能實現效果
于是去網上找了個例子，是可以進行在大部分瀏覽器下的排序的，可惜沒有微軟自己做的那么好，比如 顯示目前是以何例何方式在排序的信息，對于此我特意改寫了一下js代碼，特意給出代碼
注意是html和js混合的，沒有分開，需要的可以自己分開來
經過我測試，效果良好:-)并且代碼簡潔易懂
以下是我改版國外的js后的代碼
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "<!--************************************************************************-->
<!--* Copyright 2002 by Mike Hall????????????????????????????????????????? *-->
<!--* Please see http://www.brainjar.com for terms of use.???????????????? *-->
<!--************************************************************************-->
<html xmlns="<head>
<title>BrainJar.com: Table Sort</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link href="/common/article.css" rel="stylesheet" type="text/css" />

<script type="text/javascript">//<![CDATA[
var blankImg="blank.gif";
var downImg="down.gif";
var upImg="up.gif";
var imgElsrc=new Array();

function setImg(obj,col)
{
?for(var i=0;i<imgElsrc.length;i++)
?{
??var imgTemp = document.getElementById("img"+i);
??if(i!=col)
??{
???imgTemp.src=blankImg;
??}else
??{
???if (obj.reverseSort[col])
???imgElsrc[col] = downImg;
???else
???imgElsrc[col] = upImg;
???
???imgTemp.src=imgElsrc[col];
??}
?}/*alert(imgElsrc.length)*/
}
function sortTable2(col) {

? // Get the table section to sort.
? var tblEl = document.getElementById("planetData2");
? // Set up an array of reverse sort flags, if not done already.
? if (tblEl.reverseSort == null)
??? tblEl.reverseSort = new Array();

? // If this column was the last one sorted, reverse its sort direction.
? if (col == tblEl.lastColumn)
??? tblEl.reverseSort[col] = !tblEl.reverseSort[col];

? // Remember this column as the last one sorted.
? tblEl.lastColumn = col;

? //初始化圖片的數組
? colLength=tblEl.rows[0].cells.length;
?if (imgElsrc.length<colLength)
?{
?imgElsrc=new Array(colLength);
?}
? // Set Image
??setImg(tblEl,col);

? // Set the table display style to "none" - necessary for Netscape 6
? // browsers.
? var oldDsply = tblEl.style.display;
? tblEl.style.display = "none";

? // Sort the rows based on the content of the specified column using a
? // selection sort.

? var tmpEl;
? var i, j;
? var minVal, minIdx;
? var testVal;
? var cmp;

? for (i = 0; i < tblEl.rows.length - 1; i++) {

??? // Assume the current row has the minimum value.
??? minIdx = i;
??? minVal = getTextValue(tblEl.rows[i].cells[col]);

??? // Search the rows that follow the current one for a smaller value.
??? for (j = i + 1; j < tblEl.rows.length; j++) {
????? testVal = getTextValue(tblEl.rows[j].cells[col]);
????? cmp = compareValues(minVal, testVal);
????? // Reverse order?
????? if (tblEl.reverseSort[col])
??????? cmp = -cmp;
????? // If this row has a smaller value than the current minimum, remember its
????? // position and update the current minimum value.
????? if (cmp > 0) {
??????? minIdx = j;
??????? minVal = testVal;
????? }
??? }

??? // By now, we have the row with the smallest value. Remove it from the
??? // table and insert it before the current row.
??? if (minIdx > i) {
????? tmpEl = tblEl.removeChild(tblEl.rows[minIdx]);
????? tblEl.insertBefore(tmpEl, tblEl.rows[i]);
??? }
? }

? // Restore the table's display style.
? tblEl.style.display = oldDsply;

? return false;
}

//-----------------------------------------------------------------------------
// Functions to get and compare values during a sort.
//-----------------------------------------------------------------------------

// This code is necessary for browsers that don't reflect the DOM constants
// (like IE).
if (document.ELEMENT_NODE == null) {
? document.ELEMENT_NODE = 1;
? document.TEXT_NODE = 3;
}

function getTextValue(el) {

? var i;
? var s;

? // Find and concatenate the values of all text nodes contained within the
? // element.
? s = "";
? for (i = 0; i < el.childNodes.length; i++)
??? if (el.childNodes[i].nodeType == document.TEXT_NODE)
????? s += el.childNodes[i].nodeValue;
??? else if (el.childNodes[i].nodeType == document.ELEMENT_NODE &&
???????????? el.childNodes[i].tagName == "BR")
????? s += " ";
??? else
????? // Use recursion to get text within sub-elements.
????? s += getTextValue(el.childNodes[i]);

? return normalizeString(s);
}

function compareValues(v1, v2) {

? var f1, f2;

? // If the values are numeric, convert them to floats.

? f1 = parseFloat(v1);
? f2 = parseFloat(v2);
? if (!isNaN(f1) && !isNaN(f2)) {
??? v1 = f1;
??? v2 = f2;
? }

? // Compare the two values.
? if (v1 == v2)
??? return 0;
? if (v1 > v2)
??? return 1
? return -1;
}

// Regular expressions for normalizing white space.
var whtSpEnds = new RegExp("^\\s*|\\s*$", "g");
var whtSpMult = new RegExp("\\s\\s+", "g");

function normalizeString(s) {

? s = s.replace(whtSpMult, " ");? // Collapse any multiple whites space.
? s = s.replace(whtSpEnds, "");?? // Remove leading or trailing white space.

? return s;
}

//]]></script>
</head>
<body>

<div id="main">


<p>Let's try it out. Here's another table with the same planet data. But this
one uses the modified version of <code>sortTable().</code></p>

<table border="1">
? <caption style="caption-side:bottom;">The Planets</caption>
? <thead>
??? <tr style="vertical-align:bottom">
????? <th style="text-align:left"? ><a href="" onclick="return sortTable2(0)">Name</a><image id="img0" src="blank.gif"></th>
????? <th style="text-align:center"><a href="" onclick="return sortTable2(1)">Diameter (mi.)</a><image id="img1" src="blank.gif"></th>
????? <th style="text-align:center"><a href="" onclick="return sortTable2(2)">Distance<br />(mi. x 1000000)</a><image id="img2" src="blank.gif"></th>
????? <th style="text-align:center"><a href="" onclick="return sortTable2(3)">Rotation (hrs.)</a><image id="img3" src="blank.gif"></th>
????? <th style="text-align:center"><a href="" onclick="return sortTable2(4)">Period (days)</a><image id="img4" src="blank.gif"></th>
??? </tr>
? </thead>
? <tbody id="planetData2">
??? <tr>
????? <td style="text-align:left">Mercury</td>
????? <td style="text-align:right">3032</td>
????? <td style="text-align:right">36.0</td>
????? <td style="text-align:right">1407.6</td>
????? <td style="text-align:right">88</td>
??? </tr>
??? <tr>
????? <td style="text-align:left">Venus</td>
????? <td style="text-align:right">7521</td>
????? <td style="text-align:right">67.2</td>
????? <td style="text-align:right">5832.5</td>
????? <td style="text-align:right">225</td>
??? </tr>
??? <tr>
????? <td style="text-align:left">Earth</td>
????? <td style="text-align:right">7926</td>
????? <td style="text-align:right">93.0</td>
????? <td style="text-align:right">23.9</td>
????? <td style="text-align:right">365</td>
??? </tr>
??? <tr>
????? <td style="text-align:left">Mars</td>
????? <td style="text-align:right">4222</td>
????? <td style="text-align:right">141.6</td>
????? <td style="text-align:right">24.6</td>
????? <td style="text-align:right">687</td>
??? </tr>
??? <tr>
????? <td style="text-align:left">Jupiter</td>
????? <td style="text-align:right">88846</td>
????? <td style="text-align:right">483.8</td>
????? <td style="text-align:right">9.9</td>
????? <td style="text-align:right">4331</td>
??? </tr>
??? <tr>
????? <td style="text-align:left">Saturn</td>
????? <td style="text-align:right">74897</td>
????? <td style="text-align:right">890.8</td>
????? <td style="text-align:right">10.7</td>
????? <td style="text-align:right">10747</td>
??? </tr>
??? <tr>
????? <td style="text-align:left">Uranus</td>
????? <td style="text-align:right">31763</td>
????? <td style="text-align:right">1784.8</td>
????? <td style="text-align:right">17.2</td>
????? <td style="text-align:right">30589</td>
??? </tr>
??? <tr>
????? <td style="text-align:left">Neptune</td>
????? <td style="text-align:right">30775</td>
????? <td style="text-align:right">2793.1</td>
????? <td style="text-align:right">16.1</td>
????? <td style="text-align:right">59800</td>
??? </tr>
??? <tr>
????? <td style="text-align:left">Pluto</td>
????? <td style="text-align:right">1485</td>
????? <td style="text-align:right">3647.2</td>
????? <td style="text-align:right">153.3</td>
????? <td style="text-align:right">90588</td>
??? </tr>
? </tbody>
</table>

<p>You can now change the sort direction of each column independently.</p>

<p>The sort function can be modified in other ways to better accommodate both
the table data and its presentation. We'll look at some ideas next.</p>

<p class="footer"><a href="default5.asp">Prev</a>
|
<a href="default7.asp">Next</a></p>
</div>

</body>
</html>
主要增加了圖片顯示狀態的功能，即增加函數setImg

另外還提供一個非常簡單的js排序函數，但是好像只可以在IE下使用，代碼如下
/*表格排序是對表格而言的，與表格的生成無關。就是說，無論用何種方式產生的表格排序時都一樣。這是排序函數，很簡單。
分升序和降序，要求傳入參數：obj 表格名或id; n 排序列，第一列為0*/
function table_sort_asc(obj,n) {
? var i,j;
? var tab = eval("document.all."+obj);
? if(tab.tagName != "TABLE") return;
? for(i=0;i<tab.rows.length-1;i++)
?for(j=i+1;j<tab.rows.length;j++)
??if(tab.rows[i].cells[n].innerHTML > tab.rows[j].cells[n].innerHTML)
???tab.rows[i].swapNode(tab.rows[j]);
}

function table_sort_desc(obj,n) {
? var i,j;
? var tab = eval("document.all."+obj);
? if(tab.tagName != "TABLE") return;
? for(i=0;i<tab.rows.length-1;i++)
?for(j=i+1;j<tab.rows.length;j++)
??if(tab.rows[i].cells[n].innerHTML < tab.rows[j].cells[n].innerHTML)
???tab.rows[i].swapNode(tab.rows[j]);
}

除了用js來進行排序外，還可以用xml+xslt進行排序，但是還是有瀏覽器不兼容的問題，比較麻煩，我搜集了一些網上常用的表格排序的例子，現在放在網站上，提供下載