以前写的一段脚本,可以直接在已有的网页上引用,可以对每列都进行排序、倒序,如果只要实现你说的功能,可以根据需要简化一下:sortTable.js:-------------------------------------------------------------------
/**
**  对任意一个表格进行排序之一: **  作者:emu(ston) **  使用:
在网页中定义表格的时候加入如下标记:
<TABLE sortable=true>
该网页即可排序。 可以指定一行为标题栏,按如下格式:
<TR sortLine=true >
如不指定则为表格第一行。 默认按照字母顺序排序,如某列需按数字排序,对应的标题栏要这样定义
<TD sortType="float">ddd</TD> **  注意: 
1 如果表格中存在tHead部分,sortLine行应该在thead中
2 如不指定sortLine,默认表格的第一行为sortLine
3 排序算法未经优化,在表格比较大的时候速度会比较慢(优化的算法呢?下回吧。)
4 这个版本的排序完全使用节点克隆,主要考虑到有的时候表格里面可能会有其他的元素,但是在某些版本的浏览器上这样的操作有可能不够安全。只使用简单表格的话可以试试:对任意一个表格进行排序之二*/
var tmptables = document.all.tags("table");
for (var i=0;i<tmptables.length;i++)
if (tmptables[i].sortable)
attachTable(tmptables[i])
var sortLine,sortCol;function tableToArray(tmptable)
{
var result = new Array();
if (tmptable.tHead == null)
{
for (var i=tmptable.firstChild.children.length-1;i>sortLine;i--)
{
var tmptr = tmptable.firstChild.children[i];//如果不存在thead的话就把tbody中在sortLine行之下的行排序
result[result.length] = tmptr.cloneNode(true);
}
}
else
{
for (var i=tmptable.children[1].children.length-1;i>-1;i--)
{
var tmptr =tmptable.children[1].children[i]; //如果存在thead的话则默认把tbody中的全部行排序
result[result.length] = tmptr.cloneNode(true);
}
}
return result;
}function sortArrayFloat(arg1,arg2) //根据指定的列按浮点数排序

return (parseFloat(arg1.children[sortCol].innerText) - parseFloat(arg2.children[sortCol].innerText)) 
}
function sortArrayString(arg1,arg2) //根据指定的列按串排序

if (arg1.children[sortCol].innerText>arg2.children[sortCol].innerText) return 1
else return -1
}
function arrayToTable(ar,tmptable)
{
if (tmptable.tHead == null)
tmptbody = tmptable.firstChild;
else
tmptbody = tmptable.children[1]; for (var i=0;i<ar.length;i++)
{
tmptbody.deleteRow(ar[i].rowIndex);
}
var tmptbody;
for (var i=0;i<ar.length;i++)
{
tmptbody.insertBefore(ar[i]);
}
}function sortTable()
{ var elm = event.srcElement;
var tmptr = elm.parentNode;
tmptable = tmptr.parentNode.parentNode; for (var i=0;i<tmptr.children.length; i++)
{
if (tmptr.children[i] == elm )
break
}
sortCol = i;//获得被点击的列
sortLine = tmptable.sortLine;//获得被点击的行
var ar = tableToArray(tmptable);//把行转换为数组
if (elm.sortType == "float")
ar.sort(sortArrayFloat);//排序
else
ar.sort(sortArrayString);//排序 if (elm.reverse == true)
{
elm.reverse = false;
ar.reverse();
}
else
{
elm.reverse = true;
}
arrayToTable(ar,tmptable);
}function attachTable(tmptable)
// 为一个表格的一行添加事件
{
var line = 0;
for (var i=0;i<tmptable.firstChild.children.length ; i++)
if (tmptable.firstChild.children[i].sortLine)
line = i ;
var tds = tmptable.firstChild.children[line].children;
for (var i=0;i<tds.length;i++)
{
tds[i].attachEvent("onclick",sortTable);
tds[i].style.cursor="hand";
tds[i].style.fontWeight="bold"
}
tmptable.sortLine=line;
}
-------------------------------------------------------------------试一试看:
-------------------------------------------------------------------
<html>
<head>
<title>emu's sorttable</title>
<SCRIPT LANGUAGE="JavaScript" src="sortTable.js" defer></SCRIPT>
</head>
<body>
<TABLE sortable=true>
<thead>
<TR>
<TD colspan=4>考试成绩</TD>
</TR>
<TR sortLine=true >
<TD>姓名</TD>
<TD sortType="float">语文</TD>
<TD sortType="float">数学</TD>
<TD sortType="float">英语</TD>
</TR>
</thead>
<tbody>
<TR>
<TD>aaa</TD>
<TD>65</TD>
<TD>60</TD>
<TD>87</TD>
</TR>
<TR>
<TD>bbb</TD>
<TD>75</TD>
<TD>60</TD>
<TD>85</TD>
</TR>
<TR>
<TD>ccc</TD>
<TD>55</TD>
<TD>74</TD>
<TD>73</TD>
</TR>
<TR>
<TD>ddd</TD>
<TD>95</TD>
<TD>90</TD>
<TD>100</TD>
</TR>
</tbody>
<tfoot>
<tr>
<td colspan=4 align=center style="font-size:15;color:red">
by emu(ston) 2002
</td>
</tr>
</tfoot>
</TABLE>
<BR>
</body>
</html>
-------------------------------------------------------------------thead和tfoot中的内容在排序时会被忽略,保持原来的位置。