今天有點閑，寫個小東西，使用JS實現點擊表格標題欄實現自動排序功能，嘻嘻...
一、JS代碼，文件名為code.js如下：
(function($){
//插件
$.extend($,{
//命名空間
sortTable:{
sort:function(tableId,Idx){
var table = document.getElementById(tableId);
var tbody = table.tBodies[0];
var tr = tbody.rows;
var trValue = new Array();
for (var i=0; i<tr.length; i++ ) {
trValue[i] = tr[i]; //將表格中各行的信息存儲在新建的數組中
}
if (tbody.sortCol == Idx) {
trValue.reverse(); //如果該列已經進行排序過了，則直接對其反序排列
} else {
//trValue.sort(compareTrs(Idx)); //進行排序
trValue.sort(function(tr1, tr2){
var value1 = tr1.cells[Idx].innerHTML;
var value2 = tr2.cells[Idx].innerHTML;
return value1.localeCompare(value2);
});
}
var fragment = document.createDocumentFragment(); //新建一個代碼片段，用於保存排序后的結果
for (var i=0; i<trValue.length; i++ ) {
fragment.appendChild(trValue[i]);
}
tbody.appendChild(fragment); //將排序的結果替換掉之前的值
tbody.sortCol = Idx;
}
}
});
})(jQuery);
二、HTML部分，主要引入JS代碼與指定ID調用JS的排序方法，如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>自定義表格排序(JS)</title>
<script type="text/javascript" src="jquery-1.4.3.js"></script>
<script type="text/javascript" src="code.js"></script>
<style type="text/css">
* { padding: 0; margin: 0; }
body { font-family: verdana; font-size: 12px; }
.content { width: 550px; margin: 20px auto; }
.content h1 { font-family: '微軟雅黑'; font-size: 18px; padding-bottom: 5px; }
table { width: 100%; }
th, td { padding: 6px 0; text-align: center; }
th { background-color: #007D28; color: #ffffff; }
tr { background-color: #E8FFE8; }
.odd { background-color: #FFF3EE; }
.highlight { background-color: #FFF3EE; }
</style>
</head>
<body>
<table summary="user infomation table" id="tableSort">
<thead>
<tr>
<th onclick="$.sortTable.sort('tableSort',0)" style="cursor: pointer;">會員ID</th>
<th onclick="$.sortTable.sort('tableSort',1)" style="cursor: pointer;">會員名</th>
<th onclick="$.sortTable.sort('tableSort',2)" style="cursor: pointer;">郵箱</th>
<th onclick="$.sortTable.sort('tableSort',3)" style="cursor: pointer;">會員組</th>
<th onclick="$.sortTable.sort('tableSort',4)" style="cursor: pointer;">城市</th>
<th onclick="$.sortTable.sort('tableSort',5)" style="cursor: pointer;">注冊時間</th>
</tr>
</thead>
<tbody>
<tr>
<td>126</td>
<td>webw3c</td>
<td>este@126.com</td>
<td>普通會員</td>
<td>北京</td>
<td>2011-04-13</td>
</tr>
<tr>
<td>145</td>
<td>test001</td>
<td>test001@126.com</td>
<td>中級會員</td>
<td>合肥</td>
<td>2011-03-27</td>
</tr>
<tr>
<td>116</td>
<td>wuliao</td>
<td>wuliao@126.com</td>
<td>普通會員</td>
<td>南昌</td>
<td>2011-04-01</td>
</tr>
<tr>
<td>129</td>
<td>tired</td>
<td>tired@126.com</td>
<td>中級會員</td>
<td>北京</td>
<td>2011-04-06</td>
</tr>
<tr>
<td>155</td>
<td>tiredso</td>
<td>tireds0@126.com</td>
<td>中級會員</td>
<td>武漢</td>
<td>2011-04-06</td>
</tr>
<tr>
<td>131</td>
<td>javascript</td>
<td>js2011@126.com</td>
<td>中級會員</td>
<td>武漢</td>
<td>2011-04-08</td>
</tr>
<tr>
<td>132</td>
<td>jQuery</td>
<td>jQuery@126.com</td>
<td>高級會員</td>
<td>北京</td>
<td>2011-04-12</td>
</tr>
</tbody>
</table>
</body>
</html>