1
<
html
>
2 < head >
3 < title > Sort Table Page </ title >
4 < style type ="text/css" >
5 * { font-family : Tahoma,Arial,serif ; font-size : large ; }
6 body { text-align : center ; min-width : 760px ; }
7 #main { width : 720px ; margin : 0 auto ; text-align : left ; }
8 #tbContainer { text-align : center ; }
9 p { border-bottom : 1px dotted #e63 ; }
10 thead { background-color : #6495ed ; cursor : pointer ; }
11 table {
12 text-align : center ;
13 border : 1px solid #4682b4 ;
14 width : 80% ;
15 background-color : #4682b4 ;
16 }
17 td { background-color : #fff ; }
18 </ style >
19 < script type ="text/javascript" >
20 /* 直接使用大于号、小于号进行排序 */
21 function comp(a,b) {
22 return (a < b) ? - 1 : ((a > b) ? 1 : 0 );
23 }
24
25 /* 比较日期时间型数据 */
26 function dateComp(a,b) {
27 var dtA = new Date(Date.parse(a)); // 解析日期字符串,对象转换为Date
28 var dtB = new Date(Date.parse(b));
29 return comp(dtA,dtB);
30 }
31 /* 比较布尔型数据 */
32 function boolComp(a,b) {
33 // 将a转换为0或者1,分别对应于true和false
34 if (a == " true " ) a = 0 ;
35 else if (a == " false " ) a = 1 ;
36 else if (a) a = 0 ;
37 else a = 1 ;
38
39 if (b == " true " ) b = 0 ;
40 else if (b == " false " ) b = 1 ;
41 else if (b) b = 0 ;
42 else b = 1 ;
43
44 return comp(a,b);
45 }
46
47 // 对string对象进行扩展,增加trim方法,用于删除字符串两端的空白
48 String.prototype.trim = function () {
49 var re = / ^\s+|\s+$ / g;
50 return this .replace(re, "" );
51 }
52
53 function createComp(col,type,inverse) {
54 inverse = inverse || false ; // 默认正序排列
55 // 比较函数,正序排列用
56 var compFunc = function (trA,trB) {
57 // trA中待比较元素值
58 var valA = trA.cells[col].firstChild.nodeValue.trim();
59 // trB中待比较元素值
60 var valB = trB.cells[col].firstChild.nodeValue.trim();
61 // 字符串比较
62 if (type == " string " ) return valA.localeCompare(valB);
63 // 日期时间比较
64 else if (type == " date " ) return dateComp(valA,valB);
65 // 布尔型比较
66 else if (type == " boolean " ) return boolComp(valA,valB);
67 // 默认情况下比较
68 else return comp(valA,valB);
69 }
70 // 正序排列
71 if ( ! inverse) {
72 return compFunc;
73 } else {
74 // 逆序排序
75 return function (trA,trB) {
76 return - compFunc(trA,trB);
77 }
78 }
79 }
80
81 // 全局变量,用于记录当前排序字段和排序方式
82 var currentCol, currentReverse;
83 /* 表格排序 */
84 function sort(col,type,reverse) {
85 var doReverse;
86 // 如果再次点击当前排序字段
87 if (col == currentCol) {
88 doReverse = true ; // 进行逆序的标志
89 currentReverse = ! currentReverse; // 记录排序方式
90 } else {
91 currentReverse = false ; // 默认为正序排序
92 }
93 // 记录当前排序的字段
94 currentCol = col;
95 // 待排序表格
96 var tb = document.getElementById( " td " );
97 // 表格行的父节点
98 var tbody = tb.rows[ 1 ].parentNode;
99 // 用于保存所有表格行的数组
100 var allTr = [];
101 // 将所有表格行存入数组,第1行为表头,不参与排序
102 for ( var i = 1 ; i < tb.rows.length; i ++ ) {
103 allTr.push(tb.rows[i]);
104 }
105 if (doReverse) {
106 allTr.reverse();
107 } else {
108 // 按指定的字段、数据类型和排序方式进行排序
109 allTr.sort(createComp(col,type,reverse));
110 }
111 // 创建文档片段对象
112 var frag = document.createDocumentFragment();
113 // 将表格行按照排序后的结果保存到文档片段中
114 for ( var i = 0 ; i < allTr.length; i ++ ) {
115 frag.appendChild(allTr[i]);
116 }
117 // 更新页面的显示
118 tbody.appendChild(frag);
119 }
120 </ script >
121 </ head >
122 < body >
123 < div id ="main" >
124 < table id ="td" cellpadding ="1" cellspacing ="1" border ="0" >
125 < thead >
126 < tr >
127 < th onclick ="sort(0,'string')" > 字符串 </ th >
128 < th onclick ="sort(1,'number')" > 数字 </ th >
129 < th onclick ="sort(2,'date')" > 日期时间 </ th >
130 < th onclick ="sort(3,'boolean')" > 布尔型 </ th >
131 </ tr >
132 </ thead >
133 < tbody >
134 < tr >
135 < td > abcde </ td >
136 < td > 123 </ td >
137 < td > November 1,1997 10:15 am </ td >
138 < td > true </ td >
139 </ tr >
140 < tr >
141 < td > bcdef </ td >
142 < td > 345 </ td >
143 < td > May 4,2004 9:15 pm </ td >
144 < td > false </ td >
145 </ tr >
146 < tr >
147 < td > cdefg </ td >
148 < td > 234 </ td >
149 < td > July 8,2005 8:10 am </ td >
150 < td > true </ td >
151 </ tr >
152 < tr >
153 < td > defgh </ td >
154 < td > 567 </ td >
155 < td > April 20,2005 4:30 pm </ td >
156 < td > false </ td >
157 </ tr >
158 < tr >
159 < td > efghi </ td >
160 < td > 456 </ td >
161 < td > January 30,2007 6:20 am </ td >
162 < td > true </ td >
163 </ tr >
164 </ tbody >
165 </ table >
166 </ div >
167 </ body >
168 </ html >
2 < head >
3 < title > Sort Table Page </ title >
4 < style type ="text/css" >
5 * { font-family : Tahoma,Arial,serif ; font-size : large ; }
6 body { text-align : center ; min-width : 760px ; }
7 #main { width : 720px ; margin : 0 auto ; text-align : left ; }
8 #tbContainer { text-align : center ; }
9 p { border-bottom : 1px dotted #e63 ; }
10 thead { background-color : #6495ed ; cursor : pointer ; }
11 table {
12 text-align : center ;
13 border : 1px solid #4682b4 ;
14 width : 80% ;
15 background-color : #4682b4 ;
16 }
17 td { background-color : #fff ; }
18 </ style >
19 < script type ="text/javascript" >
20 /* 直接使用大于号、小于号进行排序 */
21 function comp(a,b) {
22 return (a < b) ? - 1 : ((a > b) ? 1 : 0 );
23 }
24
25 /* 比较日期时间型数据 */
26 function dateComp(a,b) {
27 var dtA = new Date(Date.parse(a)); // 解析日期字符串,对象转换为Date
28 var dtB = new Date(Date.parse(b));
29 return comp(dtA,dtB);
30 }
31 /* 比较布尔型数据 */
32 function boolComp(a,b) {
33 // 将a转换为0或者1,分别对应于true和false
34 if (a == " true " ) a = 0 ;
35 else if (a == " false " ) a = 1 ;
36 else if (a) a = 0 ;
37 else a = 1 ;
38
39 if (b == " true " ) b = 0 ;
40 else if (b == " false " ) b = 1 ;
41 else if (b) b = 0 ;
42 else b = 1 ;
43
44 return comp(a,b);
45 }
46
47 // 对string对象进行扩展,增加trim方法,用于删除字符串两端的空白
48 String.prototype.trim = function () {
49 var re = / ^\s+|\s+$ / g;
50 return this .replace(re, "" );
51 }
52
53 function createComp(col,type,inverse) {
54 inverse = inverse || false ; // 默认正序排列
55 // 比较函数,正序排列用
56 var compFunc = function (trA,trB) {
57 // trA中待比较元素值
58 var valA = trA.cells[col].firstChild.nodeValue.trim();
59 // trB中待比较元素值
60 var valB = trB.cells[col].firstChild.nodeValue.trim();
61 // 字符串比较
62 if (type == " string " ) return valA.localeCompare(valB);
63 // 日期时间比较
64 else if (type == " date " ) return dateComp(valA,valB);
65 // 布尔型比较
66 else if (type == " boolean " ) return boolComp(valA,valB);
67 // 默认情况下比较
68 else return comp(valA,valB);
69 }
70 // 正序排列
71 if ( ! inverse) {
72 return compFunc;
73 } else {
74 // 逆序排序
75 return function (trA,trB) {
76 return - compFunc(trA,trB);
77 }
78 }
79 }
80
81 // 全局变量,用于记录当前排序字段和排序方式
82 var currentCol, currentReverse;
83 /* 表格排序 */
84 function sort(col,type,reverse) {
85 var doReverse;
86 // 如果再次点击当前排序字段
87 if (col == currentCol) {
88 doReverse = true ; // 进行逆序的标志
89 currentReverse = ! currentReverse; // 记录排序方式
90 } else {
91 currentReverse = false ; // 默认为正序排序
92 }
93 // 记录当前排序的字段
94 currentCol = col;
95 // 待排序表格
96 var tb = document.getElementById( " td " );
97 // 表格行的父节点
98 var tbody = tb.rows[ 1 ].parentNode;
99 // 用于保存所有表格行的数组
100 var allTr = [];
101 // 将所有表格行存入数组,第1行为表头,不参与排序
102 for ( var i = 1 ; i < tb.rows.length; i ++ ) {
103 allTr.push(tb.rows[i]);
104 }
105 if (doReverse) {
106 allTr.reverse();
107 } else {
108 // 按指定的字段、数据类型和排序方式进行排序
109 allTr.sort(createComp(col,type,reverse));
110 }
111 // 创建文档片段对象
112 var frag = document.createDocumentFragment();
113 // 将表格行按照排序后的结果保存到文档片段中
114 for ( var i = 0 ; i < allTr.length; i ++ ) {
115 frag.appendChild(allTr[i]);
116 }
117 // 更新页面的显示
118 tbody.appendChild(frag);
119 }
120 </ script >
121 </ head >
122 < body >
123 < div id ="main" >
124 < table id ="td" cellpadding ="1" cellspacing ="1" border ="0" >
125 < thead >
126 < tr >
127 < th onclick ="sort(0,'string')" > 字符串 </ th >
128 < th onclick ="sort(1,'number')" > 数字 </ th >
129 < th onclick ="sort(2,'date')" > 日期时间 </ th >
130 < th onclick ="sort(3,'boolean')" > 布尔型 </ th >
131 </ tr >
132 </ thead >
133 < tbody >
134 < tr >
135 < td > abcde </ td >
136 < td > 123 </ td >
137 < td > November 1,1997 10:15 am </ td >
138 < td > true </ td >
139 </ tr >
140 < tr >
141 < td > bcdef </ td >
142 < td > 345 </ td >
143 < td > May 4,2004 9:15 pm </ td >
144 < td > false </ td >
145 </ tr >
146 < tr >
147 < td > cdefg </ td >
148 < td > 234 </ td >
149 < td > July 8,2005 8:10 am </ td >
150 < td > true </ td >
151 </ tr >
152 < tr >
153 < td > defgh </ td >
154 < td > 567 </ td >
155 < td > April 20,2005 4:30 pm </ td >
156 < td > false </ td >
157 </ tr >
158 < tr >
159 < td > efghi </ td >
160 < td > 456 </ td >
161 < td > January 30,2007 6:20 am </ td >
162 < td > true </ td >
163 </ tr >
164 </ tbody >
165 </ table >
166 </ div >
167 </ body >
168 </ html >