JavaScript学习笔记9--表格排序

这次的例子，只是把Nicholas C .Zakas的例子理解了一下，代码是在学习表格排序时的Demo.
单个数据类型的排序比较简单，他这个例子的特别之处在于能兼容多种数据类型的排序。例子
很简单，但是里面有些设计思想给我启发很大，每次看他的书，都有新的收获。

< html >
< head >
< title > SortTable2 </ title >
< meta http-equiv ="content-type" content ="text/html;charset=UTF-8" >
< script type ="text/javascript" >
/* *************************************************************************
排序的主方法，有三个形参，STableTd,iCol,sDataType分别为需要排序的表格ID，
需要排序的表格列号，所在列的数据类型（支持int,float,date,string四种数据类型)
************************************************************************* */
function sortTable(sTableId,iCol,sDataType){
var oTable = document.getElementById(sTableId); // 获取表格的ID
var oTbody = oTable.tBodies[ 0 ]; // 获取表格的tbody
var colDataRows = oTbody.rows; // 获取tbody里的所有行的引用
var aTRs = new Array; // 定义aTRs数组用于存放tbody里的行
for ( var i = 0 ;i < colDataRows.length;i ++ ){ // 依次把所有行放如aTRs数组/
aTRs.push(colDataRows[i]);
}
/* **********************************************************************
sortCol属性是额外给table添加的属性，用于作顺反两种顺序排序时的判断，区分
首次排序和后面的有序反转
*********************************************************************** */
if (oTable.sortCol == iCol){ // 非首次排序
aTRs.reverse();
}
else { // 首次排序
aTRs.sort(generateCompareTRs(iCol,sDataType));
}
var oFragment = document.createDocumentFragment(); // 创建文档碎片/
for ( var i = 0 ;i < aTRs.length;i ++ ){ // 把排序过的aTRs数组成员依次添加到文档碎片
oFragment.appendChild(aTRs[i]);
}
oTbody.appendChild(oFragment); // 把文档碎片添加到tbody,完成排序后的显示更新
oTable.sortCol = iCol; // 把当前列号赋值给sortCol,以此来区分首次排序和非首次排序,//sortCol的默认值为-1

};

// 比较函数，用于两项之间的排序
function generateCompareTRs(iCol,sDataType){
return function compareTRs(oTR1,oTR2){
var vValue1 = convert(oTR1.cells[iCol].firstChild.nodeValue,sDataType);
var vValue2 = convert(oTR2.cells[iCol].firstChild.nodeValue,sDataType);
if (vValue1 < vValue2){
return - 1 ;
}
else if (vValue1 > vValue2){
return 1 ;
}
else {
return 0 ;
}
};
};
// 数据类型转换函数
function convert(sValue,sDataType){
switch (sDataType){
case " int " : return parseInt(sValue);
case " float " : return parseFloat(sValue);
case " date " : return new Date(Date.parse(sValue));
default : return sValue.toString();
}
};
</ script >

</ head >

< body >
< form name ="f1" id ="f1" action ="" method ="post" >
< table border ="1" id ="tblSort" sortCol ="-1" >
< thead >
< tr >
< th onclick ="sortTable('tblSort',0)" style ="cursor:pointer" > LastName </ th >
< th onclick ="sortTable('tblSort',1)" style ="cursor:pointer" > FirstName </ th >
< th onclick ="sortTable('tblSort',2,'date')" style ="cursor:pointer" > Birthday </ th >
< th onclick ="sortTable('tblSort',3,'int')" style ="cursor:pointer" > Silbings </ th >
</ tr >
</ thead >
< tbody >
< tr >
< td > Simth </ td >
< td > John </ td >
< td > 7/12/1978 </ td >
< td > 2 </ td >
</ tr >
< tr >
< td > Johnson </ td >
< td > Betty </ td >
< td > 5/12/1965 </ td >
< td > 5 </ td >
</ tr >
< tr >
< td > Henderson </ td >
< td > Nathan </ td >
< td > 10/15/1977 </ td >
< td > 3 </ td >
</ tr >
< tr >
< td > Willianms </ td >
< td > James </ td >
< td > 2/25/1949 </ td >
< td > 1 </ td >
</ tr >
< tr >
< td > Gilliam </ td >
< td > Michael </ td >
< td > 7/8/1980 </ td >
< td > 4 </ td >
</ tr >
< tr >
< td > Walker </ td >
< td > Matthew </ td >
< td > 6/18/1981 </ td >
< td > 3 </ td >
</ tr >
</ tbody >
</ table >
</ form >
</ body >
</ html >

排序前:

按Birthday排序后: