如題
<!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" />
<style type="text/css">
.tbl-list, .tbl-list td, .tbl-list th {
border: solid 1px #000;
border-collapse: collapse;
padding: 10px;
margin: 15px;
}
</style>
<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>
<title>table sort</title>
<script type="text/javascript">
//排序 tableId: 表的id,iCol:第幾列 ；dataType：iCol對應的列顯示數據的數據類型
function sortAble(th, tableId, iRow, iCol, dataType) {
var ascChar = "▲";
var descChar = "▼";
var table = document.getElementById(tableId);
var rows = table.tHead.rows;
//排序標題加背景色
for (var i = 0; i < rows.length; i++) {
for(var j=0;j<rows[i].cells.length;j++){//取得第幾行下面的td個數，再次循環遍歷該行下面的td元素
var th = rows[i].cells[j];
var thText= th.innerHTML.replace(ascChar, "").replace(descChar, "");
if(i==iRow&&j==iCol){
}
else{
th.innerHTML=thText;
}
}
}
var tbody = table.tBodies[0];
var colRows = tbody.rows;
var aTrs = new Array;
//將得到的行放入數組，備用
for (var i = 0; i < colRows.length; i++) {
aTrs.push(colRows[i]);
}
//判斷上一次排列的列和現在需要排列的是否同一個。
if (table.sortCol == iCol) {
aTrs.reverse();
} else {
//如果不是同一列，使用數組的sort方法，傳進排序函數
aTrs.sort(compareEle(iCol, dataType));
}
var oFragment = document.createDocumentFragment();
for (var i = 0; i < aTrs.length; i++) {
oFragment.appendChild(aTrs[i]);
}
tbody.appendChild(oFragment);
//記錄最后一次排序的列索引
table.sortCol = iCol;
//給排序標題加“升序、降序” 小圖標顯示
var th = rows[iRow].cells[iCol];
if (th.innerHTML.indexOf(ascChar) == -1 && th.innerHTML.indexOf(descChar) == -1) {
th.innerHTML += ascChar;
//alert(th.innerHTML);
}
else if (th.innerHTML.indexOf(ascChar) != -1) {
th.innerHTML=th.innerHTML.replace(ascChar, descChar);
//alert(th.innerHTML.replace(ascChar,descChar));
}
else if (th.innerHTML.indexOf(descChar) != -1) {
th.innerHTML=th.innerHTML.replace(descChar, ascChar);
}
}
//將列的類型轉化成相應的可以排列的數據類型
function convert(sValue, dataType) {
switch (dataType) {
case "int":
return parseInt(sValue, 10);
case "float":
return parseFloat(sValue);
case "date":
return new Date(Date.parse(sValue));
case "string":
default:
return sValue.toString();
}
}
//排序函數，iCol表示列索引，dataType表示該列的數據類型
function compareEle(iCol, dataType) {
return function (oTR1, oTR2) {
var vValue1 = convert(removeHtmlTag($(oTR1.cells[iCol]).html()), dataType);
var vValue2 = convert(removeHtmlTag($(oTR2.cells[iCol]).html()), dataType);
if (vValue1 < vValue2) {
return -1;
}
else {
return 1;
}
};
}
//去掉html標簽
function removeHtmlTag(html) {
return html.replace(/<[^>]+>/g, "");
}
</script>
</head>
<body>
<table id="tableId" class="tbl-list" cellpadding="0" cellspacing="0" style="table-layout:fixed;">
<thead>
<tr>
<td rowspan="2" >序號</td>
<td width="100px" rowspan="2" onclick="sortAble(this,'tableId', 0,1,'string')"
style="cursor:pointer">姓名</td>
<td width="200px" rowspan="2" onclick="sortAble(this,'tableId',0, 2, 'date')"
style="cursor:pointer">生日</td>
<td width="200px" colspan="2" style="cursor:pointer">年齡</td>
<td width="100px" rowspan="2" onclick="sortAble(this,'tableId', 0,4, 'float')"
style="cursor:pointer">工資</td>
</tr>
<tr>
<td onclick="sortAble(this,'tableId', 1, 0, 'int')" style="cursor:pointer">age 1</td>
<td onclick="sortAble(this,'tableId', 1, 1, 'int')" style="cursor:pointer">age 2</td>
</tr>
</thead>
<tbody>
<tr group="A">
<td>1</td>
<td>Group-A</a></td>
<td>01/12/1982</td>
<td>25</td>
<td>26</td>
<td>1000.50</td>
</tr>
<tr group="B">
<td>4</td>
<td>Group-B</a></td>
<td>10/14/1999</td>
<td>18</td>
<td>19</td>
<td>1000.20</td>
</tr>
<tr group="C">
<td>7</td>
<td>Group-C</a></td>
<td>10/14/1980</td>
<td>8</td>
<td>20</td>
<td>1000.30</td>
</tr>
</tbody>
</table>
</body>
</html>