使用Javascript对表格进行排序（摘自Javascript高级程序设计）
// sortTable.js 文件
function convert(sValue,sDataType)
{
switch(sDataType)
{
case "int":
return parseInt(sValue);
break;
case "float":
return parseFloat(sValue);
break;
case "date":
return new Date(Date.parse(sValue));
break;
default:
return sValue.toString();
}
}
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 sortTable(sTableId,iCol,sDataType)
{
var oTable = document.getElementById(sTableId);
var oTBody = oTable.tBodies[0];
var colDataRows = oTBody.rows;
var aTrs = new Array();
for(var i = 0;i<colDataRows.length;i++)
{
aTrs.push(colDataRows[i]);
}
if(oTable.sortCol == iCol)
{
aTrs.reverse();
}
else
{
aTrs.sort(generateCompareTrs(iCol,sDataType));
}
var oFragment = document.createDocumentFragment();
for(var i = 0;i<aTrs.length;i++)
{
oFragment.appendChild(aTrs[i]);
}
oTBody.appendChild(oFragment);
oTable.sortCol = iCol;
}
//The end
<!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>
<title>无标题页</title>
<script type="text/javascript" src="sortTable.js"></script>
</head>
<body>
<table border="1" id="tblSort">
<thead>
<tr>
<th onclick="sortTable('tblSort',0)" style="cursor:pointer ">Last Name</th>
<th onclick="sortTable('tblSort',1)" style="cursor:pointer ">First Name</th>
<th onclick="sortTable('tblSort',2,'date')" style="cursor:pointer ">Birthday</th>
<th onclick="sortTable('tblSort',3,'int')" style="cursor:pointer ">Siblings</th>
</tr>
</thead>
<tbody>
<tr>
<td>Smith</td>
<td>John</td>
<td>7/12/1978</td>
<td>2</td>
</tr>
<tr>
<td>Sjohnson</td>
<td>Betty</td>
<td>10/15/1977</td>
<td>4</td>
</tr>
<tr>
<td>Henderson</td>
<td>Nathan</td>
<td>2/25/1949</td>
<td>1</td>
</tr>
<tr>
<td>Williams</td>
<td>James</td>
<td>7/8/1980</td>
<td>4</td>
</tr>
<tr>
<td>Gilliam</td>
<td>Michael</td>
<td>7/22/1949</td>
<td>1</td>
</tr>
<tr>
<td>Walker</td>
<td>Matthew</td>
<td>1/14/2000</td>
<td>3</td>
</tr>
</tbody>
</table>
</body>
</html>
