//表格列排序的js方法:
//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;
}
};
}
//2.类型转换函数
//参数说明:要转换的值,目标数据类型
function convert(sValue, sDataType) {
switch (sDataType) {
case "int":
return parseInt(sValue);
break;
case "float":
return parseFloat(sValue);
break;
case "date":
sValue = sValue.replace(/\-/g, "/");
return new Date(Date.parse(sValue));
break;
default:
return sValue.toString();
}
}
//3.排序函数
//参数说明:表ID,排序列索引,列数据类型
function sortTable(tableID, iCol, sDataType) {
var tb = document.getElementById(tableID);
var arr = new Array();
var coll = tb.tBodies[0].rows;
if (coll.length > 0) {
for (var i = 0; i < coll.length; i++) {
arr.push(coll[i]);
}
if (tb.sortCol == iCol) {
arr.reverse();
}
else {
arr.sort(generateCompareTRs(iCol, sDataType));
}
var oFrament = document.createDocumentFragment();
for (var i = 0; i < arr.length; i++) {
oFrament.appendChild(arr[i]);
}
tb.tBodies[0].appendChild(oFrament);
tb.sortCol = iCol;
}
}
HTML:
<table id="tb">
<thead>
<tr>
<th style="cursor: pointer;" onclick="sortTable('tb',0,'int')">
编号
</th>
<th style="cursor: pointer;" onclick="sortTable('tb',1,'str')">
姓名
</th>
<th style="cursor: pointer;" onclick="sortTable('tb',2,'float')">
金钱
</th>
<th style="cursor: pointer;" onclick="sortTable('tb',3,'date')">
更新日期
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
2
</td>
<td>
刘志国
</td>
<td>
435.34
</td>
<td>
2012-10-02
</td>
</tr>
<tr>
<td>
5
</td>
<td>
许世友
</td>
<td>
121.34
</td>
<td>
2012-03-01
</td>
</tr>
<tr>
<td>
1
</td>
<td>
Jack
</td>
<td>
22.324
</td>
<td>
2012-04-07
</td>
</tr>
<tr>
<td>
7
</td>
<td>
Tom
</td>
<td>
132.32
</td>
<td>
2012-12-02
</td>
</tr>
</tbody>
</table>