<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <script type="text/javascript"> //排序 tableId: 表的id,iCol:第几列 ;dataType:iCol对应的列显示数据的数据类型 function sortAble(tableId, iCol, dataType) { var table = document.getElementById(tableId); var tbody = table.tBodies[0]; var colRows = tbody.rows; var aTrs = new Array; //将将得到的列放入数组,备用 for (var i=0; i < colRows.length; i++) { aTrs[i] = colRows[i]; } //判断上一次排列的列和现在需要排列的是否同一个。 if (table.sortCol == iCol) { aTrs.reverse(); } else { //如果不是同一列,使用数组的sort方法,传进排序函数 aTrs.sort(compareEle(iCol, dataType)); } var oFragment = document.createDocumentFragment(); for (var i=0; i < aTrs.length; i++) { oFragment.appendChild(aTrs[i]); } tbody.appendChild(oFragment); //记录最后一次排序的列索引 table.sortCol = iCol; } //将列的类型转化成相应的可以排列的数据类型 function convert(sValue, dataType) { switch(dataType) { case "int": return parseInt(sValue); case "float": return parseFloat(sValue); case "date": return new Date(Date.parse(sValue)); default: return sValue.toString(); } } //排序函数,iCol表示列索引,dataType表示该列的数据类型 function compareEle(iCol, dataType) { return function (oTR1, oTR2) { var vValue1 = convert(ieOrFireFox(oTR1.cells[iCol]), dataType); var vValue2 = convert(ieOrFireFox(oTR2.cells[iCol]), dataType); if (vValue1 < vValue2) { return -1; } else if (vValue1 > vValue2) { return 1; } else { return 0; } }; } <script> </head> <body> <table border="1" id="tableId"> <thead> <tr> <th οnclick="sortAble('tableId', 0)" style="cursor:pointer" mce_style="cursor:pointer">name</th> <th οnclick="sortAble('tableId', 1, 'date')" style="cursor:pointer" mce_style="cursor:pointer">Birthday</th> <th οnclick="sortAble('tableId', 2, 'int')" style="cursor:pointer" mce_style="cursor:pointer">Age</th> </tr> </thead> <tbody> <tr> <td>Ozone</td> <td>01/12/1982</td> <td>25</td> </tr> <tr> <td>OnlyBlue3</td> <td>10/24/1983</td> <td>23</td> </tr> <tr> <td>Momo</td> <td>10/14/1999</td> <td>8</td> </tr> </tbody> </table> </body> </html>