代码
<script language="javascript">
//按列和列数据类型排序表格
function sortTable(tableID, iCol, dataType){
var docFrag = document.createDocumentFragment(); //创建文档碎片
var sortArr = getSortTRs(tableID, iCol, dataType);
for(var i=0; i<sortArr.length; i++){
docFrag.appendChild(sortArr[i]);
}
var oTable = document.getElementById(tableID);
oTable.tBodies[0].appendChild(docFrag);
oTable.sortCol = iCol;
}
//返回排序后的行
function getSortTRs(tableID, iCol, dataType){
var trArr = new Array;
var oTable = document.getElementById(tableID);
var rows = oTable.tBodies[0].rows;
for(var i=0; i<rows.length; i++){
trArr[i] = rows[i];
}
if(oTable.sortCol == iCol){
trArr.reverse();
}else{
trArr.sort(compareTRs(iCol, dataType));
}
return trArr;
}
function compareTRs(iCol, dataType){
return function compare(tr1, tr2){
var value1 = convert(tr1.cells[iCol].firstChild.nodeValue, dataType);
var value2 = convert(tr2.cells[iCol].firstChild.nodeValue, dataType);
if(value1 < value2){
return -1;
}else if( value1 > value2 ){
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>
//按列和列数据类型排序表格
function sortTable(tableID, iCol, dataType){
var docFrag = document.createDocumentFragment(); //创建文档碎片
var sortArr = getSortTRs(tableID, iCol, dataType);
for(var i=0; i<sortArr.length; i++){
docFrag.appendChild(sortArr[i]);
}
var oTable = document.getElementById(tableID);
oTable.tBodies[0].appendChild(docFrag);
oTable.sortCol = iCol;
}
//返回排序后的行
function getSortTRs(tableID, iCol, dataType){
var trArr = new Array;
var oTable = document.getElementById(tableID);
var rows = oTable.tBodies[0].rows;
for(var i=0; i<rows.length; i++){
trArr[i] = rows[i];
}
if(oTable.sortCol == iCol){
trArr.reverse();
}else{
trArr.sort(compareTRs(iCol, dataType));
}
return trArr;
}
function compareTRs(iCol, dataType){
return function compare(tr1, tr2){
var value1 = convert(tr1.cells[iCol].firstChild.nodeValue, dataType);
var value2 = convert(tr2.cells[iCol].firstChild.nodeValue, dataType);
if(value1 < value2){
return -1;
}else if( value1 > value2 ){
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>
代码
<table border="1" id="sortTable"> <thead>
<tr background="blue">
<td onmouseover="javascript:this.style.cursor = 'hand'" onclick="sortTable('sortTable', 0, 'string');">字符串排序</td>
<td onmouseover="javascript:this.style.cursor = 'hand'" onclick="sortTable('sortTable', 1, 'int');">数字排序</td>
</tr>
</thead>
<tr><td>李康</td><td>3</td></tr>
<tr><td>李洁</td><td>4</td></tr>
<tr><td>李康</td><td>3</td></tr>
<tr><td>朱敏健</td><td>8</td></tr>
<tr><td>朱洁</td><td>7</td></tr>
<tr><td>杨乐勇</td><td>5</td></tr>
</table>
<tr background="blue">
<td onmouseover="javascript:this.style.cursor = 'hand'" onclick="sortTable('sortTable', 0, 'string');">字符串排序</td>
<td onmouseover="javascript:this.style.cursor = 'hand'" onclick="sortTable('sortTable', 1, 'int');">数字排序</td>
</tr>
</thead>
<tr><td>李康</td><td>3</td></tr>
<tr><td>李洁</td><td>4</td></tr>
<tr><td>李康</td><td>3</td></tr>
<tr><td>朱敏健</td><td>8</td></tr>
<tr><td>朱洁</td><td>7</td></tr>
<tr><td>杨乐勇</td><td>5</td></tr>
</table>