<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>表格排序</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<style type="text/css">
table {
border: 1px solid;
width: 400px;
height: 400px;
padding: 10px;
text-align: center;
}
td {
border: 1px solid;
}
</style>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function() {
$("#table").delegate("#ageSort", "click", function() {
ageSort();
return false;
});
$("#table").delegate("#ageSortDesc", "click", function() {
ageSortDesc();
return false;
});
});
function ageSort() {
var tableRows = $("#table tbody tr");
for ( var i = 0; i < tableRows.length; i++) {
for ( var j = i + 1; j < tableRows.length; j++) {
var cell1 = tableRows.eq(i).find("td").eq(1);
var cell2 = tableRows.eq(j).find("td").eq(1);
if (cell1.html() > cell2.html()) {
var temp = tableRows.eq(i).html();
tableRows.eq(i).empty().html(tableRows.eq(j).html());
tableRows.eq(j).empty().html(temp);
}
}
}
$("#table tbody").empty().html(tableRows);
}
function ageSortDesc() {
var tableRows = $("#table tbody tr");
for ( var i = 0; i < tableRows.length; i++) {
for ( var j = i + 1; j < tableRows.length; j++) {
var cell1 = tableRows.eq(i).find("td").eq(1);
var cell2 = tableRows.eq(j).find("td").eq(1);
if (cell1.html() < cell2.html()) {
var temp = tableRows.eq(i).html();
tableRows.eq(i).empty().html(tableRows.eq(j).html());
tableRows.eq(j).empty().html(temp);
}
}
}
$("#table tbody").empty().html(tableRows);
}
</script>
</head>
<body>
<table id="table" cellpadding="0px" cellspacing="0px">
<thead>
<tr>
<th>姓名
</td>
<th>年龄<a href="javascript:void(0)" id="ageSort">升序</a> | <a
href="javascript:void(0)" id="ageSortDesc">降序</a>
</td>
<th>出生日期
</td>
</tr>
</thead>
<tbody>
<tr>
<td>潘博1</td>
<td>30</td>
<td>1990-10-11</td>
</tr>
<tr>
<td>潘博2</td>
<td>14</td>
<td>1990-10-11</td>
</tr>
<tr>
<td>潘博3</td>
<td>22</td>
<td>1990-10-11</td>
</tr>
<tr>
<td>潘博4</td>
<td>21</td>
<td>1990-10-11</td>
</tr>
<tr>
<td>潘博5</td>
<td>33</td>
<td>1990-10-11</td>
</tr>
</tbody>
</table>
</body>
</html>
