<!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>JavaScript表格排序</title>
</head>
<body>
<table style="width: 151px" id="t1">
<tr>
<td style="cursor:pointer">
标题1</td>
<td>
标题2</td>
<td>
标题3</td>
</tr>
<tr>
<td>
a</td>
<td>
3</td>
<td>
d</td>
</tr>
<tr>
<td>
b</td>
<td>
2</td>
<td>
c</td>
</tr>
<tr>
<td>
c</td>
<td>
1</td>
<td>
a</td>
</tr>
</table>
<script>
enableTableSort("t1");
function enableTableSort(id)
{
var mytable=document.getElementById(id);
for(var i=0;i<mytable.rows[0].cells.length;i++)
{
mytable.rows[0].cells[i].onclick=sortTable(id,i);
mytable.rows[0].cells[i].style.cursor="pointer";
mytable.rows[0].cells[i].style.background="#f0f000";
}
function sortrow(cellIndex,sortDirection)
{
return function(row1,row2)
{
var value1= row1.cells[cellIndex].firstChild.nodeValue
var value2= row2.cells[cellIndex].firstChild.nodeValue
if(value1>value2)
{
return sortDirection
}
else if(value1<value2)
{
return sortDirection;
}
else return 0;
}
}
function sortTable(id,cellIndex)
{
return function()
{
var mytable=document.getElementById(id);
var tbody=mytable.tBodies[0];
var trows=tbody.rows;
var sortDirection=mytable.getAttribute("sortDirection")?mytable.getAttribute("sortDirection"):1;
var arows=[];
for(var i=1;i<trows.length;i++)
arows.push(trows[i]);
mytable.setAttribute("sortDirection",sortDirection?-1:1)
arows.sort(sortrow(cellIndex,sortDirection));
var docFragment=document.createDocumentFragment();
for(var i=0;i<arows.length;i++)
{
docFragment.appendChild(arows[i]);
}
tbody.appendChild(docFragment);
}
}
}
</script>
</body>
</html>