用Javascript進行簡單的Table點擊排序

最後更新：2018-12-06 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

轉自：http://www.cnblogs.com/robot/archive/2008/04/20/1161801.html

新發現一個bug:10比2小,原因是sort預設是按ascii排序的,已修複該問題.
最新DEMO下載 [修複了一些已知的問題,結合網友的回複最佳化了一些代碼,用法跟原來要樣]
html代碼[可以不看,跟html沒什麼關係.]:
<!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> <title>K2046.TableSorter</title> <style type="text/css"> body{font-size:12px;line-height:25px;} tr{height:25px;} th{font-size:14px;border-bottom:solid 1px #DDDDDD;background-color:#EEEEEE;} td{font-size:12px;text-align:center;} .SortDescCss{background-image:url(http://k2046.cn/tb/Desc.gif);background-repeat:no-repeat;background-position:right center;} .SortAscCss{background-image:url(http://k2046.cn/tb/Asc.gif);background-repeat:no-repeat;background-position:right center;} </style> <script language="javascript" type="text/javascript" src="http://files.cnblogs.com/robot/TableSorter.js"></script> </head> <body> 代碼:new TableSorter("tb1"); 效果:點擊任意表頭可執行排序. <table border="0" style="border:solid 1px #DDDDDD;width:360px;" cellpadding="0" cellspacing="0" id="tb1"> <tr> <th>序號</th> <th>姓名</th> <th>工號</th> <th>職位</th> <th>性別</th> <th>業績</th> <th>報到時間</th> </tr> <tr> <td>1</td> <td>劉德華</td> <td>8008</td> <td>總裁</td> <td>男</td> <td>98</td> <td>2008-04-12</td> </tr> <tr> <td>2</td> <td>吳奇隆</td> <td>8004</td> <td>主管</td> <td>男</td> <td>80</td> <td>2008-04-16</td> </tr> <tr> <td>3</td> <td>王光良</td> <td>8003</td> <td>經理</td> <td>男</td> <td>85</td> <td>2008-04-15</td> </tr> <tr> <td>4</td> <td>張學友</td> <td>8009</td> <td>副總裁</td> <td>男</td> <td>90</td> <td>2008-04-11</td> </tr> <tr> <td>5</td> <td>張柏芝</td> <td>8005</td> <td>助理</td> <td>女</td> <td>78</td> <td>2008-04-13</td> </tr> <tr> <td>6</td> <td>***</td> <td>8001</td> <td>總監</td> <td>男</td> <td>60</td> <td>2008-04-18</td> </tr> <tr> <td>7</td> <td>陳慧琳</td> <td>8002</td> <td>試用期</td> <td>女</td> <td>85</td> <td>2008-04-18</td> </tr> <tr> <td>8</td> <td>張曼玉</td> <td>8007</td> <td>資深經理</td> <td>女</td> <td>82</td> <td>2008-04-16</td> </tr> <tr> <td>9</td> <td>周潤發</td> <td>8006</td> <td>副總裁</td> <td>男</td> <td>88</td> <td>2008-04-13</td> </tr> </table> 代碼:new TableSorter("tb2", 0, 2, 5, 6); 效果:點擊表頭0,2,5,6列可執行排序. <table border="0" style="border:solid 1px #DDDDDD;width:360px;" cellpadding="0" cellspacing="0" id="tb2"> <tr> <th>序號</th> <th>姓名</th> <th>工號</th> <th>職位</th> <th>性別</th> <th>業績</th> <th>報到時間</th> </tr> <tr> <td>1</td> <td>劉德華</td> <td>8008</td> <td>總裁</td> <td>男</td> <td>98</td> <td>2008-04-12</td> </tr> <tr> <td>2</td> <td>吳奇隆</td> <td>8004</td> <td>主管</td> <td>男</td> <td>80</td> <td>2008-04-16</td> </tr> <tr> <td>3</td> <td>王光良</td> <td>8003</td> <td>經理</td> <td>男</td> <td>85</td> <td>2008-04-15</td> </tr> <tr> <td>4</td> <td>張學友</td> <td>8009</td> <td>副總裁</td> <td>男</td> <td>90</td> <td>2008-04-11</td> </tr> <tr> <td>5</td> <td>張柏芝</td> <td>8005</td> <td>助理</td> <td>女</td> <td>78</td> <td>2008-04-13</td> </tr> <tr> <td>6</td> <td>***</td> <td>8001</td> <td>總監</td> <td>男</td> <td>60</td> <td>2008-04-18</td> </tr> <tr> <td>7</td> <td>陳慧琳</td> <td>8002</td> <td>試用期</td> <td>女</td> <td>85</td> <td>2008-04-18</td> </tr> <tr> <td>8</td> <td>張曼玉</td> <td>8007</td> <td>資深經理</td> <td>女</td> <td>82</td> <td>2008-04-16</td> </tr> <tr> <td>9</td> <td>周潤發</td> <td>8006</td> <td>副總裁</td> <td>男</td> <td>88</td> <td>2008-04-13</td> </tr> </table> 代碼:new TableSorter("tb3").OnSorted = function(c, t) { alert("table is sorted by " + c.innerHTML + " " + (t ? "Asc" : "Desc")); } 效果:點擊任意表頭可執行排序並返回提示. <table border="0" style="border:solid 1px #DDDDDD;width:360px;" cellpadding="0" cellspacing="0" id="tb3"> <tr> <th>序號</th> <th>姓名</th> <th>工號</th> <th>職位</th> <th>性別</th> <th>業績</th> <th>報到時間</th> </tr> <tr> <td>1</td> <td>劉德華</td> <td>8008</td> <td>總裁</td> <td>男</td> <td>98</td> <td>2008-04-12</td> </tr> <tr> <td>2</td> <td>吳奇隆</td> <td>8004</td> <td>主管</td> <td>男</td> <td>80</td> <td>2008-04-16</td> </tr> <tr> <td>3</td> <td>王光良</td> <td>8003</td> <td>經理</td> <td>男</td> <td>85</td> <td>2008-04-15</td> </tr> <tr> <td>4</td> <td>張學友</td> <td>8009</td> <td>副總裁</td> <td>男</td> <td>90</td> <td>2008-04-11</td> </tr> <tr> <td>5</td> <td>張柏芝</td> <td>8005</td> <td>助理</td> <td>女</td> <td>78</td> <td>2008-04-13</td> </tr> <tr> <td>6</td> <td>***</td> <td>8001</td> <td>總監</td> <td>男</td> <td>60</td> <td>2008-04-18</td> </tr> <tr> <td>7</td> <td>陳慧琳</td> <td>8002</td> <td>試用期</td> <td>女</td> <td>85</td> <td>2008-04-18</td> </tr> <tr> <td>8</td> <td>張曼玉</td> <td>8007</td> <td>資深經理</td> <td>女</td> <td>82</td> <td>2008-04-16</td> </tr> <tr> <td>9</td> <td>周潤發</td> <td>8006</td> <td>副總裁</td> <td>男</td> <td>88</td> <td>2008-04-13</td> </tr> </table> <script language="javascript" type="text/javascript"> new TableSorter("tb1"); new TableSorter("tb2", 0, 2 , 5, 6); new TableSorter("tb3").OnSorted = function(c, t) { alert("table is sorted by " + c.innerHTML + " " + (t ? "Asc" : "Desc")); } </script> </body> </html> 
javascript代碼:
//Author : 狼Robot //Contact : robot@k2046.cn //Date : 2008-04-19 //Explain : 使Table可以點擊排序. /*使用說明 : 方法1: new TableSorter("tb1"); 效果: id為tb1的table的第一行任意儲存格都可以點擊進行排序. 方法2: new TableSorter("tb1", 0, 1, 3); 效果: id為tb1的table的第一行0,1,3儲存格可以進行點擊排序. */ function TableSorter(table) { this.Table = this.$(table); if(this.Table.rows.length <= 1) { return; } this.Init(arguments); } //以下樣式針對錶頭的儲存格. TableSorter.prototype.NormalCss = "NormalCss";//沒有執行排序時的樣式. TableSorter.prototype.SortAscCss = "SortAscCss";//升序排序時的樣式. TableSorter.prototype.SortDescCss = "SortDescCss";//降序排序時的樣式. //初始化table的資訊和操作. TableSorter.prototype.Init = function(args) { this.ViewState = []; for(var x = 0; x < this.Table.rows[0].cells.length; x++) { this.ViewState[x] = false; } if(args.length > 1) { for(var x = 1; x < args.length; x++) { if(args[x] > this.Table.rows[0].cells.length) { continue; } else { this.Table.rows[0].cells[args[x]].onclick = this.GetFunction(this,"Sort",args[x]); this.Table.rows[0].cells[args[x]].style.cursor = "pointer"; } } } else { for(var x = 0; x < this.Table.rows[0].cells.length; x++) { this.Table.rows[0].cells[x].onclick = this.GetFunction(this,"Sort",x); this.Table.rows[0].cells[x].style.cursor = "pointer"; } } } //簡寫document.getElementById方法. TableSorter.prototype.$ = function(element) { return document.getElementById(element); } //取得指定對象的脫殼函數. TableSorter.prototype.GetFunction = function(variable,method,param) { return function() { variable[method](param); } } //執行排序. TableSorter.prototype.Sort = function(col) { var SortAsNumber = true; for(var x = 0; x < this.Table.rows[0].cells.length; x++) { this.Table.rows[0].cells[x].className = this.NormalCss; } var Sorter = []; for(var x = 1; x < this.Table.rows.length; x++) { Sorter[x-1] = [this.Table.rows[x].cells[col].innerHTML, x]; SortAsNumber = SortAsNumber && this.IsNumeric(Sorter[x-1][0]); } if(SortAsNumber) { for(var x = 0; x < Sorter.length; x++) { for(var y = x + 1; y < Sorter.length; y++) { if(parseFloat(Sorter[y][0]) < parseFloat(Sorter[x][0])) { var tmp = Sorter[x]; Sorter[x] = Sorter[y]; Sorter[y] = tmp; } } } } else { Sorter.sort(); } if(this.ViewState[col]) { Sorter.reverse(); this.ViewState[col] = false; this.Table.rows[0].cells[col].className = this.SortDescCss; } else { this.ViewState[col] = true; this.Table.rows[0].cells[col].className = this.SortAscCss; } var Rank = []; for(var x = 0; x < Sorter.length; x++) { Rank[x] = this.GetRowHtml(this.Table.rows[Sorter[x][1]]); } for(var x = 1; x < this.Table.rows.length; x++) { for(var y = 0; y < this.Table.rows[x].cells.length; y++) { this.Table.rows[x].cells[y].innerHTML = Rank[x-1][y]; } } this.OnSorted(this.Table.rows[0].cells[col], this.ViewState[col]); } //取得指定行的內容. TableSorter.prototype.GetRowHtml = function(row) { var result = []; for(var x = 0; x < row.cells.length; x++) { result[x] = row.cells[x].innerHTML; } return result; } TableSorter.prototype.IsNumeric = function(num) { return /^\d+(\.\d+)?$/.test(num); } //可自行實現排序後的動作. TableSorter.prototype.OnSorted = function(cell, IsAsc) { return; }

代碼:new TableSorter("tb1");
效果:點擊任意表頭可執行排序.

序號	姓名	工號	職位	性別	業績	報到時間
1	劉德華	8008	總裁	男	98	2008-04-12
2	吳奇隆	8004	主管	男	80	2008-04-16
3	王光良	8003	經理	男	85	2008-04-15
4	張學友	8009	副總裁	男	90	2008-04-11
5	張柏芝	8005	助理	女	78	2008-04-13
6	***	8001	總監	男	60	2008-04-18
7	陳慧琳	8002	試用期	女	85	2008-04-18
8	張曼玉	8007	資深經理	女	82	2008-04-16
9	周潤發	8006	副總裁	男	88	2008-04-13

代碼:new TableSorter("tb2", 0, 2, 5, 6);
效果:點擊表頭0,2,5,6列可執行排序.

序號	姓名	工號	職位	性別	業績	報到時間
1	劉德華	8008	總裁	男	98	2008-04-12
2	吳奇隆	8004	主管	男	80	2008-04-16
3	王光良	8003	經理	男	85	2008-04-15
4	張學友	8009	副總裁	男	90	2008-04-11
5	張柏芝	8005	助理	女	78	2008-04-13
6	***	8001	總監	男	60	2008-04-18
7	陳慧琳	8002	試用期	女	85	2008-04-18
8	張曼玉	8007	資深經理	女	82	2008-04-16
9	周潤發	8006	副總裁	男	88	2008-04-13

代碼:new TableSorter("tb3").OnSorted = function(c, t)
{
alert("table is sorted by " + c.innerHTML + " " + (t ? "Asc" : "Desc"));
}
效果:點擊任意表頭可執行排序並返回提示.

序號	姓名	工號	職位	性別	業績	報到時間
1	劉德華	8008	總裁	男	98	2008-04-12
2	吳奇隆	8004	主管	男	80	2008-04-16
3	王光良	8003	經理	男	85	2008-04-15
4	張學友	8009	副總裁	男	90	2008-04-11
5	張柏芝	8005	助理	女	78	2008-04-13
6	***	8001	總監	男	60	2008-04-18
7	陳慧琳	8002	試用期	女	85	2008-04-18
8	張曼玉	8007	資深經理	女	82	2008-04-16
9	周潤發	8006	副總裁	男	88	2008-04-13

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More