Dom核心之——表格排序
本例实现点击表头排序的功能：
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>
