html表格排序的流程為：
1 獲取鼠標點擊的 表頭單元格 的列號
2 遍歷所有的數據行，獲取每個<tr>中的html
3 同時獲取每個<tr>標簽下對應獲取到的列號的<td>標簽中的內容
4 並取得<th>標簽的type屬性值（number string ip）
5 將獲取<tr>的html、<td>的內容和<th>的type屬性值拼接成字符串添加到數組array中
6 然后將表格<tr>中的html全部置空
7 根據type屬性值的不同采用不同的方法對<td>的內容進行比較
8 根據比較結果對數組array進行排序
9 然后將排序后的數組元素重新賦值給已經置空的<tr>
10 如果已經對該列排序過了，則直接對數組進行倒置
提供數值、字符串以及IP地址三種類型的排序規則。字符串類型排序規則采用javascript的localeCompare方法。
具體代碼：
<!DOCTYPE HTML>
<html>
<head>
<title> 表格排序 </title>
<meta charset=
"utf-8"
>
<meta name=
"Generator"
content=
"EditPlus"
>
<meta name=
"Author"
content=
"tschengbin"
>
<meta name=
"Keywords"
content=
"jquery tableSort"
>
<meta name=
"Description"
content=
""
>
<style type=
"text/css"
>
p{
width: 1024px;
margin:
0
auto;
/*p相對屏幕左右居中*/
}
table{
border: solid 1px #
666
;
border-collapse: collapse;
width:
100
%;
cursor:
default
;
}
tr{
border: solid 1px #
666
;
height: 30px;
}
table thead tr{
background-color: #ccc;
}
td{
border: solid 1px #
666
;
}
th{
border: solid 1px #
666
;
text-align: center;
cursor: pointer;
}
.sequence{
text-align: center;
}
.hover{
background-color: #3399FF;
}
</style>
</head>
<body>
<p>
<table id=
"tableSort"
>
<thead>
<tr>
<th type=
"number"
>序號</th>
<th type=
"string"
>書名</th>
<th type=
"number"
>價格（元）</th>
<th type=
"string"
>出版時間</th>
<th type=
"number"
>印刷量（冊）</th>
<th type=
"ip"
>IP</th>
</tr>
</thead>
<tbody>
<tr
class
=
"hover"
>
<td
class
=
"sequence"
>
1
</td>
<td>狼圖騰</td>
<td>
29.80
</td>
<td>
2009
-
10
</td>
<td>
50000
</td>
<td>
192.168
.
1.125
</td>
</tr>
<tr>
<td
class
=
"sequence"
>
2
</td>
<td>孝心不能等待</td>
<td>
29.80
</td>
<td>
2009
-
09
</td>
<td>
800
</td>
<td>
192.68
.
1.125
</td>
</tr>
<tr>
<td
class
=
"sequence"
>
3
</td>
<td>藏地密碼
2
</td>
<td>
28.00
</td>
<td>
2008
-
10
</td>
<td></td>
<td>
192.102
.
0.12
</td>
</tr>
<tr>
<td
class
=
"sequence"
>
4
</td>
<td>藏地密碼
1
</td>
<td>
24.80
</td>
<td>
2008
-
10
</td>
<td></td>
<td>
215.34
.
126.10
</td>
</tr>
<tr>
<td
class
=
"sequence"
>
5
</td>
<td>設計模式之禪</td>
<td>
69.00
</td>
<td>
2011
-
12
</td>
<td></td>
<td>
192.168
.
1.5
</td>
</tr>
<tr>
<td
class
=
"sequence"
>
6
</td>
<td>輕量級 Java EE 企業應用實戰</td>
<td>
99.00
</td>
<td>
2012
-
04
</td>
<td>
5000
</td>
<td>
192.358
.
1.125
</td>
</tr>
<tr>
<td
class
=
"sequence"
>
7
</td>
<td>Java 開發實戰經典</td>
<td>
79.80
</td>
<td>
2012
-
01
</td>
<td>
2000
</td>
<td>
192.168
.
1.25
</td>
</tr>
<tr>
<td
class
=
"sequence"
>
8
</td>
<td>Java Web 開發實戰經典</td>
<td>
69.80
</td>
<td>
2011
-
11
</td>
<td>
2500
</td>
<td>
215.168
.
54.125
</td>
</tr>
</tbody>
</table>
</p>
<script type=
"text/javascript"
>
$(document).ready(function(){
var tableObject = $(
'#tableSort'
);
//獲取id為tableSort的table對象
var tbHead = tableObject.children(
'thead'
);
//獲取table對象下的thead
var tbHeadTh = tbHead.find(
'tr th'
);
//獲取thead下的tr下的th
var tbBody = tableObject.children(
'tbody'
);
//獲取table對象下的tbody
var tbBodyTr = tbBody.find(
'tr'
);
//獲取tbody下的tr
var sortIndex = -
1
;
//初始化索引
tbHeadTh.each(function() {
//遍歷thead的tr下的th
var thisIndex = tbHeadTh.index($(
this
));
//獲取th所在的列號
//鼠標移除和聚焦的效果，不重要
$(
this
).mouseover(function(){
//鼠標移開事件
tbBodyTr.each(function(){
//編列tbody下的tr
var tds = $(
this
).find(
"td"
);
//獲取列號為參數index的td對象集合
$(tds[thisIndex]).addClass(
"hover"
);
});
}).mouseout(function(){
//鼠標聚焦時間
tbBodyTr.each(function(){
var tds = $(
this
).find(
"td"
);
$(tds[thisIndex]).removeClass(
"hover"
);
});
});
$(
this
).click(function() {
//鼠標點擊事件
var dataType = $(
this
).attr(
"type"
);
//獲取當前點擊列的 type
checkColumnValue(thisIndex, dataType);
//對當前點擊的列進行排序 （當前索引，排序類型）
});
});
//顯示效果，不重要
$(
"tbody tr"
).removeClass();
//先移除tbody下tr的所有css類
$(
"tbody tr"
).mouseover(function(){
$(
this
).addClass(
"hover"
);
}).mouseout(function(){
$(
this
).removeClass(
"hover"
);
});
//對表格排序
function checkColumnValue(index, type) {
var trsValue =
new
Array();
//創建一個新的列表
tbBodyTr.each(function() {
//遍歷所有的tr標簽
var tds = $(
this
).find(
'td'
);
//查找所有的 td 標簽
//將當前的點擊列 push 到一個新的列表中
//包括 當前行的 類型、當前索引的 值，和當前行的值
trsValue.push(type +
".separator"
+ $(tds[index]).html() +
".separator"
+ $(
this
).html());
$(
this
).html(
""
);
//清空當前列
});
var len = trsValue.length;
//獲取所有要拍戲的列的長度
if
(index == sortIndex){
//sortIndex =-1
trsValue.reverse();
//???
}
else
{
for
(var i =
0
; i < len; i++){
//遍歷所有的行
type = trsValue[i].split(
".separator"
)[
0
];
// 獲取要排序的類型
for
(var j = i +
1
; j < len; j++){
value1 = trsValue[i].split(
".separator"
)[
1
];
//當前值
value2 = trsValue[j].split(
".separator"
)[
1
];
//當前值的下一個
if
(type ==
"number"
){
//js 三元運算 如果 values1 等於 '' （空） 那么，該值就為0，否則 改值為當前值
value1 = value1 ==
""
?
0
: value1;
value2 = value2 ==
""
?
0
: value2;
//parseFloat() 函數可解析一個字符串，並返回一個浮點數。
//該函數指定字符串中的首個字符是否是數字。如果是，則對字符串進行解析，直到到達數字的末端為止，然后以數字返回該數字，而不是作為字符串。
//如果字符串的第一個字符不能被轉換為數字，那么 parseFloat() 會返回 NaN。
if
(parseFloat(value1) > parseFloat(value2)){
//如果當前值 大於 下一個值
var temp = trsValue[j];
//那么就記住 大 的那個值
trsValue[j] = trsValue[i];
trsValue[i] = temp;
}
}
else
if
(type ==
"ip"
){
if
(ip2int(value1) > ip2int(value2)){
var temp = trsValue[j];
trsValue[j] = trsValue[i];
trsValue[i] = temp;
}
}
else
{
//JavaScript localeCompare() 方法 用本地特定的順序來比較兩個字符串。
//說明比較結果的數字。
// 如果 stringObject 小於 target，則 localeCompare() 返回小於 0 的數。
// 如果 stringObject 大於 target，則該方法返回大於 0 的數。
// 如果兩個字符串相等，或根據本地排序規則沒有區別，該方法返回 0。
if
(value1.localeCompare(value2) >
0
) {
//該方法不兼容谷歌瀏覽器
var temp = trsValue[j];
trsValue[j] = trsValue[i];
trsValue[i] = temp;
}
}
}
}
}
for
(var i =
0
; i < len; i++){
//將排序完的 值 插入到 表格中
//:eq(index) 匹配一個給定索引值的元素
$(
"tbody tr:eq("
+ i +
")"
).html(trsValue[i].split(
".separator"
)[
2
]);
//console.log($("tbody tr:eq(" + i + ")").html())
}
sortIndex = index;
}
//IP轉成整型 ？？？？？
function ip2int(ip){
var num =
0
;
ip = ip.split(
"."
);
//Number() 函數把對象的值轉換為數字。
num = Number(ip[
0
]) *
256
*
256
*
256
+ Number(ip[
1
]) *
256
*
256
+ Number(ip[
2
]) *
256
+ Number(ip[
3
]);
return
num;
}
})
</script>
</body>
</html>