<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script type="text/javascript">
function sortTable(num,dataType){
var oTable = document.getElementById("tblSort");
var oTBody = oTable.tBodies[0];
var colDataRows = oTBody.rows;
var oTRs = new Array();
for(var i=0;i<colDataRows.length;i++){
oTRs[i] = colDataRows[i];
}
//如果用户在同一列上点击多次，会升序和降序进行循环，更加完善业务
if(oTable.sortNum==num){
oTRs.reverse();
}else {
oTRs.sort(generateCompareTRs(num,dataType));
}
//此处创建了一个文档碎片，好处是可以进行一次性的添加
var oFragment = document.createDocumentFragment();
for(var i=0;i<oTRs.length;i++){
oFragment.appendChild(oTRs[i]);
}
oTBody.appendChild(oFragment);
oTable.sortNum = num;
}
//单列进行排序（table表只有一列）
function compareTRs(oTR1,oTR2){
var value1 = oTR1.cells[0].firstChild.nodeValue;
var value2 = oTR2.cells[0].firstChild.nodeValue;
return value1.localeCompare(value2);
}
//该函数返回一个函数，根据参数代表的当前列，对该列排序
function generateCompareTRs(num,dataType){
return function compareTRs(oTR1,oTR2){
var value1 = convert(oTR1.cells[num].firstChild.nodeValue,dataType);
var value2 = convert(oTR2.cells[num].firstChild.nodeValue,dataType);
//各种数据都可以用下面的方式排序
if(value1<value2){
return -1;
}else if(value1>value2){//else if里不能用==判断，因为当数据为date类型，比较的是date对象是否为同一对象，而>,<比较的date转换后的毫秒数
return 1;
}else {
return 0;
}
};
}
//对数据进行相应的转换，因为从表里拿到的数据都是字符串
function convert(value,dataType){
switch(dataType){
case "int":
return parseInt(value);
case "float":
return parseFloat(value);
case "date":
return new Date(Date.parse(value));
default:
return value.toString();
}
}
</script>
</HEAD>
<BODY>
<table border="1" id="tblSort" align="center">
<thead>
<tr>
<!--cursor光标的意思，当光标移到该表头上，光标会变成手的模样 -->
<th onclick="sortTable(0,'String')" style="cursor:pointer">Last Name</th>
<th onclick="sortTable(1,'String')" style="cursor:pointer">First Name</th>
<th onclick="sortTable(2,'int')" style="cursor:pointer">Age</th>
<th onclick="sortTable(3,'date')" style="cursor:pointer">date</th>
</tr>
</thead>
<tbody align="center">
<tr>
<td style="color:red">Smith</td>
<td style="color:red">John</td>
<td style="color:red">23</td>
<td style="color:red">06/18/2009</td>
</tr>
<tr>
<td>Johnson</td>
<td>micrel</td>
<td>33</td>
<td>03/18/2009</td>
</tr>
<tr>
<td>Mike</td>
<td>Kamlong</td>
<td>28</td>
<td>06/11/2009</td>
</tr>
<tr>
<td>Jordon</td>
<td>mary</td>
<td>21</td>
<td>08/18/2009</td>
</tr>
<tr>
<td>James</td>
<td>Grady</td>
<td>23</td>
<td>01/18/2009</td>
</tr>
<tr>
<td>Gosling</td>
<td>James</td>
<td>25</td>
<td>11/18/2009</td>
</tr>
</tbody>
</TABLE>
</BODY>
</HTML>