JavaScript实现表格排序

<style type="text/css">
.desc
{
background-image:url(../Images/Desc.gif);
background-repeat:no-repeat;
}
.asc
{
background-image:url(../Images/Asc.gif);
background-repeat:no-repeat;
}
</style>

<!--
= * = = * = = * = = * = = * = = * = = * = = * = = * = = * = = * = = *
* 作 者： 我本有心
= QQ: 381584252
* E-Mail: hztgcl1986@163.com
= 转载请注明出处及作者！
* 版权所有,侵权必究！！！
=
* http://www.8848so.com，人物搜索，8848So = * = = * = = * = = * = = * = = * = = * = = * = = * = = * = = * = = *
-->
<script language="javascript" type="text/javascript">
//---------------------------------------------------------------------------------------------------------------表格排序
function convert(data,type) //数据类型转换函数
{
switch (type)
{
case "int": //整型
return parseInt(data);
break;
case "float": //浮点型
return parseFloat(data);
break;
case "date": //日期型
return new Date(Date.parse(data));
break;
default: //字符型
return data.toString();
}
}

function returncompare(cellIndex,type) //比较函数生成器
{
return function compare(oTR1,oTR2) //比较函数
{
if (oTR1.cells[cellIndex].order) //排序(order为自定义属性)
{
var str1 = convert(oTR1.cells[cellIndex].order,type); //数据类型转换
var str2 = convert(oTR2.cells[cellIndex].order,type); //数据类型转换
}
else //按照td内文本排序
{
var str1 = convert(oTR1.cells[cellIndex].innerHTML,type); //数据类型转换
var str2 = convert(oTR2.cells[cellIndex].innerHTML,type); //数据类型转换
}

if (str1 > str2) //比较
{
return 1;
}
else if (str1 < str2)
{
return -1;
}
else
{
return 0;
}
}
}

function tableSort(tableId,cellIndex,type) //排序表格ID,排序列索引,排序数据类型
{
var oTable = document.getElementById(tableId); //表格
var oTBody = oTable.tBodies[0]; //表格的第一个tbody
var rows = oTBody.rows; //tbody的rows

var rowsa = new Array();

for (var i=0;i<rows.length;i++) //将rows放入数组,用于排序
{
rowsa[i] = rows[i];
}

if (oTable.lastSortCol == cellIndex) //判断是否和上一次排序的列索引相等
{
rowsa.reverse(); //反转
}
else
{
rowsa.sort(returncompare(cellIndex,type)); //数组排序，调用比较函数
}

var oDF = document.createDocumentFragment(); //创建文档碎片
for(var j=0;j<rowsa.length;j++) //将排序后数组附加于文档碎片
{
oDF.appendChild(rowsa[j]);
}

oTBody.appendChild(oDF); //将文档碎片附加于tbody

oTable.lastSortCol = cellIndex; //自定义属性,用于保存上一次排序的列索引

//以下代码：实现排序时图片的更换
var oTHead = oTable.tHead;
var cells = oTHead.rows[0].cells;

for(var k=0;k<cells.length;k++)
{
if ((cells[k].className =="desc" || cells[k].className =="asc") && cells[k].cellIndex != cellIndex)
{
cells[k].className = "orderby";
}
}

if (cells[cellIndex].className == "asc")
{
cells[cellIndex].className = "desc";
}
else
{
cells[cellIndex].className = "asc"
}
//

}
//---------------------------------------------------------------------------------------------------------------
</script>

调用示例：

<table id="hzt">

<tr><th onclick="tableSort('hzt',0,'int')">数字</th></tr> <!--整型int,浮点型float,日期型date,字符型string-->

<tr><td>1</td></tr>

<tr><td>2</td></tr>

</table>