<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js排序特效</title>
<style>
.main{ height:auto; overflow:hidden; margin:0px auto;}
.main td{ text-align:center; height:28px; width:100px; line-height:28px ; font-size:14px; color:#555;}
.main .title td{ cursor:pointer; color:#333}
.none{ display:none}
</style>
</head>
<body>
<table class="main" width="500" border="0" cellspacing="1" bgcolor="#666666">
<tr class="title">
<td bgcolor="#CCCCCC">姓名</td>
<td bgcolor="#CCCCCC">年龄</td>
<td bgcolor="#CCCCCC">出生年</td>
<td bgcolor="#CCCCCC">分数</td>
</tr>
<tr>
<td bgcolor="#FFFFFF">李百(L)</td>
<td bgcolor="#FFFFFF">15</td>
<td bgcolor="#FFFFFF">1988</td>
<td bgcolor="#FFFFFF">99</td>
</tr>
<tr>
<td bgcolor="#FFFFFF">王易(W)</td>
<td bgcolor="#FFFFFF">25</td>
<td bgcolor="#FFFFFF">2000</td>
<td bgcolor="#FFFFFF">150</td>
</tr>
<tr>
<td bgcolor="#FFFFFF">林明(L)</td>
<td bgcolor="#FFFFFF">18</td>
<td bgcolor="#FFFFFF">1745</td>
<td bgcolor="#FFFFFF">120</td>
</tr>
<tr>
<td bgcolor="#FFFFFF">李姐(L)</td>
<td bgcolor="#FFFFFF">20</td>
<td bgcolor="#FFFFFF">1996</td>
<td bgcolor="#FFFFFF">130</td>
</tr>
</table>
<div class="none"></div>
<script src="jquery.min.js" type="text/javascript" ></script>
<script>
$(document).ready(function(){
var pk = 1;
$(".title td").click(function(e){
var currentTd = parseInt($(e.currentTarget).index());
var trLength = $("table tr").length;
var valueArray = [];
var p = 0;
for(var i = 1; i < trLength; i++){
valueArray[p] = currentTd != 0 ? parseInt($("table tr:eq(" + i + ") td").eq(currentTd).html()) : $("table tr:eq(" + i + ") td").eq(currentTd).html();
p++;
};
if(pk == 1){
pk = 2;
valueArray.sort(function(a, b){return a < b ? -1 : 1;});
}
else{
pk = 1;
valueArray.sort(function(a, b){return a > b ? -1 : 1;});
}
var valueLength = valueArray.length;
for(var i = 0; i < valueLength; i++){
for(var b = 1; b < trLength; b++){
var valueText = currentTd != 0 ? parseInt($("table tr:eq(" + b + ") td").eq(currentTd).html()) : $("table tr:eq(" + b + ") td").eq(currentTd).html();
if(valueText == valueArray[i]){
$("table tr").eq(b).clone().appendTo(".none");
}
};
};
var title = $("table tr:eq(0)").clone(true);
$("table").html("").append(title).append($(".none").html());
$(".none").html("");
});
});
</script>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js排序特效</title>
<style>
.main{ height:auto; overflow:hidden; margin:0px auto;}
.main td{ text-align:center; height:28px; width:100px; line-height:28px ; font-size:14px; color:#555;}
.main .title td{ cursor:pointer; color:#333}
.none{ display:none}
</style>
</head>
<body>
<table class="main" width="500" border="0" cellspacing="1" bgcolor="#666666">
<tr class="title">
<td bgcolor="#CCCCCC">姓名</td>
<td bgcolor="#CCCCCC">年龄</td>
<td bgcolor="#CCCCCC">出生年</td>
<td bgcolor="#CCCCCC">分数</td>
</tr>
<tr>
<td bgcolor="#FFFFFF">李百(L)</td>
<td bgcolor="#FFFFFF">15</td>
<td bgcolor="#FFFFFF">1988</td>
<td bgcolor="#FFFFFF">99</td>
</tr>
<tr>
<td bgcolor="#FFFFFF">王易(W)</td>
<td bgcolor="#FFFFFF">25</td>
<td bgcolor="#FFFFFF">2000</td>
<td bgcolor="#FFFFFF">150</td>
</tr>
<tr>
<td bgcolor="#FFFFFF">林明(L)</td>
<td bgcolor="#FFFFFF">18</td>
<td bgcolor="#FFFFFF">1745</td>
<td bgcolor="#FFFFFF">120</td>
</tr>
<tr>
<td bgcolor="#FFFFFF">李姐(L)</td>
<td bgcolor="#FFFFFF">20</td>
<td bgcolor="#FFFFFF">1996</td>
<td bgcolor="#FFFFFF">130</td>
</tr>
</table>
<div class="none"></div>
<script src="jquery.min.js" type="text/javascript" ></script>
<script>
$(document).ready(function(){
var pk = 1;
$(".title td").click(function(e){
var currentTd = parseInt($(e.currentTarget).index());
var trLength = $("table tr").length;
var valueArray = [];
var p = 0;
for(var i = 1; i < trLength; i++){
valueArray[p] = currentTd != 0 ? parseInt($("table tr:eq(" + i + ") td").eq(currentTd).html()) : $("table tr:eq(" + i + ") td").eq(currentTd).html();
p++;
};
if(pk == 1){
pk = 2;
valueArray.sort(function(a, b){return a < b ? -1 : 1;});
}
else{
pk = 1;
valueArray.sort(function(a, b){return a > b ? -1 : 1;});
}
var valueLength = valueArray.length;
for(var i = 0; i < valueLength; i++){
for(var b = 1; b < trLength; b++){
var valueText = currentTd != 0 ? parseInt($("table tr:eq(" + b + ") td").eq(currentTd).html()) : $("table tr:eq(" + b + ") td").eq(currentTd).html();
if(valueText == valueArray[i]){
$("table tr").eq(b).clone().appendTo(".none");
}
};
};
var title = $("table tr:eq(0)").clone(true);
$("table").html("").append(title).append($(".none").html());
$(".none").html("");
});
});
</script>
</body>
</html>