网上有很多很多用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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--************************************************************************-->
<!--* Copyright 2002 by Mike Hall *-->
<!--* Please see http://www.brainjar.com for terms of use. *-->
<!--************************************************************************-->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<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进行排序，但是还是有浏览器不兼容的问题，比较麻烦，我搜集了一些网上常用的表格排序的例子，现在放在网站上，提供下载