代码
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
2 <HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>JavaScript实现可自定义排序的表格 - </TITLE>
3 <META http-equiv=Content-Type content="text/html; charset=gb2312">
4 <STYLE type=text/css>BODY {
5 FONT-SIZE: 0.8em; FONT-FAMILY: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif
6 }
7 P {
8 FONT-WEIGHT: bold; MARGIN-BOTTOM: 0px
9 }
10 .tableWidget_headerCell {
11 BORDER-RIGHT: #aca899 1px solid; BORDER-LEFT: #fff 1px solid; CURSOR: pointer; BORDER-BOTTOM: #c5c2b2 3px solid; BACKGROUND-COLOR: #ece9d8
12 }
13 .tableWigdet_headerCellOver {
14 BORDER-RIGHT: #aca899 1px solid; BORDER-LEFT: #fff 1px solid; CURSOR: pointer; BORDER-BOTTOM: #c5c2b2 3px solid; BACKGROUND-COLOR: #ece9d8
15 }
16 .tableWigdet_headerCellDown {
17 BORDER-RIGHT: #aca899 1px solid; BORDER-LEFT: #fff 1px solid; CURSOR: pointer; BORDER-BOTTOM: #c5c2b2 3px solid; BACKGROUND-COLOR: #ece9d8
18 }
19 .tableWidget_headerCell {
20 BORDER-TOP: #ece9d8 2px solid
21 }
22 .tableWigdet_headerCellOver {
23 BORDER-TOP: #ffc83c 2px solid
24 }
25 .tableWidget TBODY .tableWidget_dataRollOver {
26 BACKGROUND-COLOR: #fff
27 }
28 .tableWigdet_headerCellDown {
29 BORDER-RIGHT: #fff 1px solid; BORDER-TOP: #ffc83c 2px solid; BORDER-LEFT: #aca899 1px solid; BACKGROUND-COLOR: #dbd8c5
30 }
31 .tableWidget TD {
32 PADDING-RIGHT: 2px; PADDING-LEFT: 2px; PADDING-BOTTOM: 2px; MARGIN: 0px; PADDING-TOP: 2px; BORDER-BOTTOM: #eae9e1 1px solid
33 }
34 .tableWidget TBODY {
35 BACKGROUND-COLOR: #fff
36 }
37 .tableWidget {
38 FONT-SIZE: 12px; WIDTH: 400px; FONT-FAMILY: arial
39 }
40 DIV.widget_tableDiv {
41 BORDER-RIGHT: #aca899 1px solid; BORDER-TOP: #aca899 1px solid; OVERFLOW-Y: auto; BORDER-LEFT: #aca899 1px solid; WIDTH: 400px; BORDER-BOTTOM: #aca899 1px solid; HEIGHT: 200px
42 }
43 HTML > BODY DIV.widget_tableDiv {
44 OVERFLOW: hidden; WIDTH: 400px
45 }
46 .tableWidget THEAD {
47 POSITION: relative
48 }
49 .tableWidget THEAD TR {
50 BOTTOM: 0px; POSITION: relative; TOP: 0px
51 }
52 .tableWidget .scrollingContent {
53 OVERFLOW-Y: auto; WIDTH: 100%
54 }
55 </STYLE>
56
57 <SCRIPT type=text/javascript>
58 /*
59 (C) www.dhtmlgoodies.com, October 2005
60
61 This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website.
62
63 Terms of use:
64 You are free to use this script as long as the copyright message is kept intact. However, you may not
65 redistribute, sell or repost it without our permission.
66
67 Thank you!
68
69 www.dhtmlgoodies.com
70 Alf Magne Kalleland
71
72 */
73 var tableWidget_tableCounter = 0;
74 var tableWidget_arraySort = new Array();
75 var tableWidget_okToSort = true;
76 var activeColumn = new Array();
77 var arrowImagePath = "images/"; // Path to arrow images
78
79 function addEndCol(obj)
80 {
81 if(document.all)return;
82 var rows = obj.getElementsByTagName('TR');
83 for(var no=0;no<rows.length;no++){
84 var cell = rows[no].insertCell(-1);
85 cell.innerHTML = ' ';
86 cell.style.width = '13px';
87 cell.width = '13';
88
89 }
90
91 }
92
93 function highlightTableHeader()
94 {
95 this.className='tableWigdet_headerCellOver';
96 if(document.all){ // I.E fix for "jumping" headings
97 var divObj = this.parentNode.parentNode.parentNode.parentNode;
98 this.parentNode.style.top = divObj.scrollTop + 'px';
99
100 }
101
102 }
103
104 function deHighlightTableHeader()
105 {
106 this.className='tableWidget_headerCell';
107 }
108
109 function mousedownTableHeader()
110 {
111 this.className='tableWigdet_headerCellDown';
112 if(document.all){ // I.E fix for "jumping" headings
113 var divObj = this.parentNode.parentNode.parentNode.parentNode;
114 this.parentNode.style.top = divObj.scrollTop + 'px';
115 }
116 }
117
118 function sortNumeric(a,b){
119
120 a = a.replace(/,/,'.');
121 b = b.replace(/,/,'.');
122 a = a.replace(/[^\d\-\.\/]/g,'');
123 b = b.replace(/[^\d\-\.\/]/g,'');
124 if(a.indexOf('/')>=0)a = eval(a);
125 if(b.indexOf('/')>=0)b = eval(b);
126 return a/1 - b/1;
127 }
128
129
130 function sortString(a, b) {
131
132 if ( a.toUpperCase() < b.toUpperCase() ) return -1;
133 if ( a.toUpperCase() > b.toUpperCase() ) return 1;
134 return 0;
135 }
136 function cancelTableWidgetEvent()
137 {
138 return false;
139 }
140
141 function sortTable()
142 {
143 if(!tableWidget_okToSort)return;
144 tableWidget_okToSort = false;
145 /* Getting index of current column */
146 var obj = this;
147 var indexThis = 0;
148 while(obj.previousSibling){
149 obj = obj.previousSibling;
150 if(obj.tagName=='TD')indexThis++;
151 }
152 var images = this.getElementsByTagName('IMG');
153
154 if(this.getAttribute('direction') || this.direction){
155 direction = this.getAttribute('direction');
156 if(navigator.userAgent.indexOf('Opera')>=0)direction = this.direction;
157 if(direction=='ascending'){
158 direction = 'descending';
159 this.setAttribute('direction','descending');
160 this.direction = 'descending';
161 }else{
162 direction = 'ascending';
163 this.setAttribute('direction','ascending');
164 this.direction = 'ascending';
165 }
166 }else{
167 direction = 'ascending';
168 this.setAttribute('direction','ascending');
169 this.direction = 'ascending';
170 }
171
172
173
174 if(direction=='descending'){
175 images[0].style.display='inline';
176 images[0].style.visibility='visible';
177 images[1].style.display='none';
178 }else{
179 images[1].style.display='inline';
180 images[1].style.visibility='visible';
181 images[0].style.display='none';
182 }
183
184
185 var tableObj = this.parentNode.parentNode.parentNode;
186 var tBody = tableObj.getElementsByTagName('TBODY')[0];
187
188 var widgetIndex = tableObj.id.replace(/[^\d]/g,'');
189 var sortMethod = tableWidget_arraySort[widgetIndex][indexThis]; // N = numeric, S = String
190 if(activeColumn[widgetIndex] && activeColumn[widgetIndex]!=this){
191 var images = activeColumn[widgetIndex].getElementsByTagName('IMG');
192 images[0].style.display='none';
193 images[1].style.display='inline';
194 images[1].style.visibility = 'hidden';
195 if(activeColumn[widgetIndex])activeColumn[widgetIndex].removeAttribute('direction');
196 }
197
198 activeColumn[widgetIndex] = this;
199
200 var cellArray = new Array();
201 var cellObjArray = new Array();
202 for(var no=1;no<tableObj.rows.length;no++){
203 var content= tableObj.rows[no].cells[indexThis].innerHTML+'';
204 cellArray.push(content);
205 cellObjArray.push(tableObj.rows[no].cells[indexThis]);
206 }
207
208 if(sortMethod=='N'){
209 cellArray = cellArray.sort(sortNumeric);
210 }else{
211 cellArray = cellArray.sort(sortString);
212 }
213
214 if(direction=='descending'){
215 for(var no=cellArray.length;no>=0;no--){
216 for(var no2=0;no2<cellObjArray.length;no2++){
217 if(cellObjArray[no2].innerHTML == cellArray[no] && !cellObjArray[no2].getAttribute('allreadySorted')){
218 cellObjArray[no2].setAttribute('allreadySorted','1');
219 tBody.appendChild(cellObjArray[no2].parentNode);
220 }
221 }
222 }
223 }else{
224 for(var no=0;no<cellArray.length;no++){
225 for(var no2=0;no2<cellObjArray.length;no2++){
226 if(cellObjArray[no2].innerHTML == cellArray[no] && !cellObjArray[no2].getAttribute('allreadySorted')){
227 cellObjArray[no2].setAttribute('allreadySorted','1');
228 tBody.appendChild(cellObjArray[no2].parentNode);
229 }
230 }
231 }
232 }
233
234 for(var no2=0;no2<cellObjArray.length;no2++){
235 cellObjArray[no2].removeAttribute('allreadySorted');
236 }
237
238 tableWidget_okToSort = true;
239
240
241 }
242
243 function initTableWidget(objId,width,height,sortArray)
244 {
245 width = width + '';
246 height = height + '';
247 var obj = document.getElementById(objId);
248 obj.parentNode.className='widget_tableDiv';
249 if(navigator.userAgent.indexOf('MSIE')>=0){
250 obj.parentNode.style.overflowY = 'auto';
251 }
252 tableWidget_arraySort[tableWidget_tableCounter] = sortArray;
253 if(width.indexOf('%')>=0){
254 obj.style.width = width;
255 obj.parentNode.style.width = width;
256 }else{
257 obj.style.width = width + 'px';
258 obj.parentNode.style.width = width + 'px';
259 }
260
261 if(height.indexOf('%')>=0){
262 //obj.style.height = height;
263 obj.parentNode.style.height = height;
264
265 }else{
266 //obj.style.height = height + 'px';
267 obj.parentNode.style.height = height + 'px';
268 }
269 obj.id = 'tableWidget' + tableWidget_tableCounter;
270 addEndCol(obj);
271
272 obj.cellSpacing = 0;
273 obj.cellPadding = 0;
274 obj.className='tableWidget';
275 var tHead = obj.getElementsByTagName('THEAD')[0];
276 var cells = tHead.getElementsByTagName('TD');
277 for(var no=0;no<cells.length;no++){
278 cells[no].className = 'tableWidget_headerCell';
279 cells[no].onselectstart = cancelTableWidgetEvent;
280 if(no==cells.length-1){
281 cells[no].style.borderRight = '0px';
282 }
283 if(sortArray[no]){
284 cells[no].onmouseover = highlightTableHeader;
285 cells[no].onmouseout = deHighlightTableHeader;
286 cells[no].onmousedown = mousedownTableHeader;
287 cells[no].onmouseup = highlightTableHeader;
288 cells[no].onclick = sortTable;
289
290 var img = document.createElement('IMG');
291 img.src = arrowImagePath + 'arrow_up.gif';
292 cells[no].appendChild(img);
293 img.style.visibility = 'hidden';
294
295 var img = document.createElement('IMG');
296 img.src = arrowImagePath + 'arrow_down.gif';
297 cells[no].appendChild(img);
298 img.style.display = 'none';
299
300
301 }else{
302 cells[no].style.cursor = 'default';
303 }
304
305
306 }
307 var tBody = obj.getElementsByTagName('TBODY')[0];
308 if(document.all && navigator.userAgent.indexOf('Opera')<0){
309 tBody.className='scrollingContent';
310 tBody.style.display='block';
311 }else{
312 tBody.className='scrollingContent';
313
314 if(tBody.offsetHeight>(tBody.parentNode.parentNode.offsetHeight - 50)) {
315 tBody.style.height = (obj.parentNode.clientHeight-tHead.offsetHeight) + 'px';
316 }else{
317 tBody.style.overflow='hidden';
318 }
319 if(navigator.userAgent.indexOf('Opera')>=0){
320 obj.parentNode.style.overflow = 'auto';
321 }
322 }
323
324 for(var no=1;no<obj.rows.length;no++){
325 obj.rows[no].onmouseover = highlightDataRow;
326 obj.rows[no].onmouseout = deHighlightDataRow;
327 for(var no2=0;no2<sortArray.length;no2++){ /* Right align numeric cells */
328 if(sortArray[no2] && sortArray[no2]=='N')obj.rows[no].cells[no2].style.textAlign='right';
329 }
330 }
331 for(var no2=0;no2<sortArray.length;no2++){ /* Right align numeric cells */
332 if(sortArray[no2] && sortArray[no2]=='N')obj.rows[0].cells[no2].style.textAlign='right';
333 }
334
335 tableWidget_tableCounter++;
336 }
337
338
339 function highlightDataRow()
340 {
341 if(navigator.userAgent.indexOf('Opera')>=0)return;
342 this.className='tableWidget_dataRollOver';
343 if(document.all){ // I.E fix for "jumping" headings
344 var divObj = this.parentNode.parentNode.parentNode;
345 var tHead = divObj.getElementsByTagName('TR')[0];
346 tHead.style.top = divObj.scrollTop + 'px';
347
348 }
349 }
350
351 function deHighlightDataRow()
352 {
353 if(navigator.userAgent.indexOf('Opera')>=0)return;
354 this.className=null;
355 if(document.all){ // I.E fix for "jumping" headings
356 var divObj = this.parentNode.parentNode.parentNode;
357 var tHead = divObj.getElementsByTagName('TR')[0];
358 tHead.style.top = divObj.scrollTop + 'px';
359 }
360 }
361
362 </SCRIPT>
363
364 <META content="MSHTML 6.00.5730.13" name=GENERATOR></HEAD>
365 <BODY>
366 <DIV class=widget_tableDiv>
367 <TABLE id=myTable>
368 <THEAD>
369 <TR>
370 <TD>Name</TD>
371 <TD>Age</TD>
372 <TD>Position</TD>
373 <TD>Income</TD>
374 <TD>Gender</TD></TR></THEAD>
375 <TBODY class=scrollingContent>
376 <TR>
377 <TD>John</TD>
378 <TD>37</TD>
379 <TD>Managing director</TD>
380 <TD>90.000</TD>
381 <TD>Male</TD></TR>
382 <TR>
383 <TD>Susan</TD>
384 <TD>34</TD>
385 <TD>Partner</TD>
386 <TD>90.000</TD>
387 <TD>Female</TD></TR>
388 <TR>
389 <TD>David</TD>
390 <TD>29</TD>
391 <TD>Head of production</TD>
392 <TD>70.000</TD>
393 <TD>Male</TD></TR>
394 <TR>
395 <TD>Laura</TD>
396 <TD>29</TD>
397 <TD>Head of marketing</TD>
398 <TD>70.000</TD>
399 <TD>Female</TD></TR>
400 <TR>
401 <TD>Kate</TD>
402 <TD>18</TD>
403 <TD>Marketing</TD>
404 <TD>50.000</TD>
405 <TD>Female</TD></TR>
406 <TR>
407 <TD>Mona</TD>
408 <TD>21</TD>
409 <TD>Marketing</TD>
410 <TD>53.000</TD>
411 <TD>Female</TD></TR>
412 <TR>
413 <TD>Mike</TD>
414 <TD>21</TD>
415 <TD>Marketing</TD>
416 <TD>53.000</TD>
417 <TD>Male</TD></TR>
418 <TR>
419 <TD>Mark</TD>
420 <TD>25</TD>
421 <TD>Production</TD>
422 <TD>52.000</TD>
423 <TD>Male</TD></TR>
424 <TR>
425 <TD>Peter</TD>
426 <TD>33</TD>
427 <TD>Production</TD>
428 <TD>55.000</TD>
429 <TD>Male</TD></TR>
430 <TR>
431 <TD>Jennifer</TD>
432 <TD>24</TD>
433 <TD>Production</TD>
434 <TD>49.000</TD>
435 <TD>Female</TD></TR>
436 <TR>
437 <TD>David</TD>
438 <TD>25</TD>
439 <TD>Photography</TD>
440 <TD>51.000</TD>
441 <TD>Male</TD></TR>
442 <TR>
443 <TD>Anna</TD>
444 <TD>42</TD>
445 <TD>Head of photography</TD>
446 <TD>56.000</TD>
447 <TD>Female</TD></TR>
448 <TR>
449 <TD>Rita</TD>
450 <TD>30</TD>
451 <TD>Photography</TD>
452 <TD>54.000</TD>
453 <TD>Female</TD></TR>
454 <TR>
455 <TD>Magnus</TD>
456 <TD>25</TD>
457 <TD>Freelancer</TD>
458 <TD>65.000</TD>
459 <TD>Male</TD></TR>
460 <TR>
461 <TD>Johnny</TD>
462 <TD>29</TD>
463 <TD>Freelancer</TD>
464 <TD>63.000</TD>
465 <TD>Male</TD></TR></TBODY></TABLE></DIV>
466 <SCRIPT type=text/javascript>
467 initTableWidget('myTable',500,250,Array('S','N',false,'N','S'));
468 </SCRIPT>
469 <BR><BR>
470 </BODY></HTML>
471
472
473 原文地址:http://www.corange.cn/archives/2010/04/3600.html
474
2 <HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>JavaScript实现可自定义排序的表格 - </TITLE>
3 <META http-equiv=Content-Type content="text/html; charset=gb2312">
4 <STYLE type=text/css>BODY {
5 FONT-SIZE: 0.8em; FONT-FAMILY: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif
6 }
7 P {
8 FONT-WEIGHT: bold; MARGIN-BOTTOM: 0px
9 }
10 .tableWidget_headerCell {
11 BORDER-RIGHT: #aca899 1px solid; BORDER-LEFT: #fff 1px solid; CURSOR: pointer; BORDER-BOTTOM: #c5c2b2 3px solid; BACKGROUND-COLOR: #ece9d8
12 }
13 .tableWigdet_headerCellOver {
14 BORDER-RIGHT: #aca899 1px solid; BORDER-LEFT: #fff 1px solid; CURSOR: pointer; BORDER-BOTTOM: #c5c2b2 3px solid; BACKGROUND-COLOR: #ece9d8
15 }
16 .tableWigdet_headerCellDown {
17 BORDER-RIGHT: #aca899 1px solid; BORDER-LEFT: #fff 1px solid; CURSOR: pointer; BORDER-BOTTOM: #c5c2b2 3px solid; BACKGROUND-COLOR: #ece9d8
18 }
19 .tableWidget_headerCell {
20 BORDER-TOP: #ece9d8 2px solid
21 }
22 .tableWigdet_headerCellOver {
23 BORDER-TOP: #ffc83c 2px solid
24 }
25 .tableWidget TBODY .tableWidget_dataRollOver {
26 BACKGROUND-COLOR: #fff
27 }
28 .tableWigdet_headerCellDown {
29 BORDER-RIGHT: #fff 1px solid; BORDER-TOP: #ffc83c 2px solid; BORDER-LEFT: #aca899 1px solid; BACKGROUND-COLOR: #dbd8c5
30 }
31 .tableWidget TD {
32 PADDING-RIGHT: 2px; PADDING-LEFT: 2px; PADDING-BOTTOM: 2px; MARGIN: 0px; PADDING-TOP: 2px; BORDER-BOTTOM: #eae9e1 1px solid
33 }
34 .tableWidget TBODY {
35 BACKGROUND-COLOR: #fff
36 }
37 .tableWidget {
38 FONT-SIZE: 12px; WIDTH: 400px; FONT-FAMILY: arial
39 }
40 DIV.widget_tableDiv {
41 BORDER-RIGHT: #aca899 1px solid; BORDER-TOP: #aca899 1px solid; OVERFLOW-Y: auto; BORDER-LEFT: #aca899 1px solid; WIDTH: 400px; BORDER-BOTTOM: #aca899 1px solid; HEIGHT: 200px
42 }
43 HTML > BODY DIV.widget_tableDiv {
44 OVERFLOW: hidden; WIDTH: 400px
45 }
46 .tableWidget THEAD {
47 POSITION: relative
48 }
49 .tableWidget THEAD TR {
50 BOTTOM: 0px; POSITION: relative; TOP: 0px
51 }
52 .tableWidget .scrollingContent {
53 OVERFLOW-Y: auto; WIDTH: 100%
54 }
55 </STYLE>
56
57 <SCRIPT type=text/javascript>
58 /*
59 (C) www.dhtmlgoodies.com, October 2005
60
61 This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website.
62
63 Terms of use:
64 You are free to use this script as long as the copyright message is kept intact. However, you may not
65 redistribute, sell or repost it without our permission.
66
67 Thank you!
68
69 www.dhtmlgoodies.com
70 Alf Magne Kalleland
71
72 */
73 var tableWidget_tableCounter = 0;
74 var tableWidget_arraySort = new Array();
75 var tableWidget_okToSort = true;
76 var activeColumn = new Array();
77 var arrowImagePath = "images/"; // Path to arrow images
78
79 function addEndCol(obj)
80 {
81 if(document.all)return;
82 var rows = obj.getElementsByTagName('TR');
83 for(var no=0;no<rows.length;no++){
84 var cell = rows[no].insertCell(-1);
85 cell.innerHTML = ' ';
86 cell.style.width = '13px';
87 cell.width = '13';
88
89 }
90
91 }
92
93 function highlightTableHeader()
94 {
95 this.className='tableWigdet_headerCellOver';
96 if(document.all){ // I.E fix for "jumping" headings
97 var divObj = this.parentNode.parentNode.parentNode.parentNode;
98 this.parentNode.style.top = divObj.scrollTop + 'px';
99
100 }
101
102 }
103
104 function deHighlightTableHeader()
105 {
106 this.className='tableWidget_headerCell';
107 }
108
109 function mousedownTableHeader()
110 {
111 this.className='tableWigdet_headerCellDown';
112 if(document.all){ // I.E fix for "jumping" headings
113 var divObj = this.parentNode.parentNode.parentNode.parentNode;
114 this.parentNode.style.top = divObj.scrollTop + 'px';
115 }
116 }
117
118 function sortNumeric(a,b){
119
120 a = a.replace(/,/,'.');
121 b = b.replace(/,/,'.');
122 a = a.replace(/[^\d\-\.\/]/g,'');
123 b = b.replace(/[^\d\-\.\/]/g,'');
124 if(a.indexOf('/')>=0)a = eval(a);
125 if(b.indexOf('/')>=0)b = eval(b);
126 return a/1 - b/1;
127 }
128
129
130 function sortString(a, b) {
131
132 if ( a.toUpperCase() < b.toUpperCase() ) return -1;
133 if ( a.toUpperCase() > b.toUpperCase() ) return 1;
134 return 0;
135 }
136 function cancelTableWidgetEvent()
137 {
138 return false;
139 }
140
141 function sortTable()
142 {
143 if(!tableWidget_okToSort)return;
144 tableWidget_okToSort = false;
145 /* Getting index of current column */
146 var obj = this;
147 var indexThis = 0;
148 while(obj.previousSibling){
149 obj = obj.previousSibling;
150 if(obj.tagName=='TD')indexThis++;
151 }
152 var images = this.getElementsByTagName('IMG');
153
154 if(this.getAttribute('direction') || this.direction){
155 direction = this.getAttribute('direction');
156 if(navigator.userAgent.indexOf('Opera')>=0)direction = this.direction;
157 if(direction=='ascending'){
158 direction = 'descending';
159 this.setAttribute('direction','descending');
160 this.direction = 'descending';
161 }else{
162 direction = 'ascending';
163 this.setAttribute('direction','ascending');
164 this.direction = 'ascending';
165 }
166 }else{
167 direction = 'ascending';
168 this.setAttribute('direction','ascending');
169 this.direction = 'ascending';
170 }
171
172
173
174 if(direction=='descending'){
175 images[0].style.display='inline';
176 images[0].style.visibility='visible';
177 images[1].style.display='none';
178 }else{
179 images[1].style.display='inline';
180 images[1].style.visibility='visible';
181 images[0].style.display='none';
182 }
183
184
185 var tableObj = this.parentNode.parentNode.parentNode;
186 var tBody = tableObj.getElementsByTagName('TBODY')[0];
187
188 var widgetIndex = tableObj.id.replace(/[^\d]/g,'');
189 var sortMethod = tableWidget_arraySort[widgetIndex][indexThis]; // N = numeric, S = String
190 if(activeColumn[widgetIndex] && activeColumn[widgetIndex]!=this){
191 var images = activeColumn[widgetIndex].getElementsByTagName('IMG');
192 images[0].style.display='none';
193 images[1].style.display='inline';
194 images[1].style.visibility = 'hidden';
195 if(activeColumn[widgetIndex])activeColumn[widgetIndex].removeAttribute('direction');
196 }
197
198 activeColumn[widgetIndex] = this;
199
200 var cellArray = new Array();
201 var cellObjArray = new Array();
202 for(var no=1;no<tableObj.rows.length;no++){
203 var content= tableObj.rows[no].cells[indexThis].innerHTML+'';
204 cellArray.push(content);
205 cellObjArray.push(tableObj.rows[no].cells[indexThis]);
206 }
207
208 if(sortMethod=='N'){
209 cellArray = cellArray.sort(sortNumeric);
210 }else{
211 cellArray = cellArray.sort(sortString);
212 }
213
214 if(direction=='descending'){
215 for(var no=cellArray.length;no>=0;no--){
216 for(var no2=0;no2<cellObjArray.length;no2++){
217 if(cellObjArray[no2].innerHTML == cellArray[no] && !cellObjArray[no2].getAttribute('allreadySorted')){
218 cellObjArray[no2].setAttribute('allreadySorted','1');
219 tBody.appendChild(cellObjArray[no2].parentNode);
220 }
221 }
222 }
223 }else{
224 for(var no=0;no<cellArray.length;no++){
225 for(var no2=0;no2<cellObjArray.length;no2++){
226 if(cellObjArray[no2].innerHTML == cellArray[no] && !cellObjArray[no2].getAttribute('allreadySorted')){
227 cellObjArray[no2].setAttribute('allreadySorted','1');
228 tBody.appendChild(cellObjArray[no2].parentNode);
229 }
230 }
231 }
232 }
233
234 for(var no2=0;no2<cellObjArray.length;no2++){
235 cellObjArray[no2].removeAttribute('allreadySorted');
236 }
237
238 tableWidget_okToSort = true;
239
240
241 }
242
243 function initTableWidget(objId,width,height,sortArray)
244 {
245 width = width + '';
246 height = height + '';
247 var obj = document.getElementById(objId);
248 obj.parentNode.className='widget_tableDiv';
249 if(navigator.userAgent.indexOf('MSIE')>=0){
250 obj.parentNode.style.overflowY = 'auto';
251 }
252 tableWidget_arraySort[tableWidget_tableCounter] = sortArray;
253 if(width.indexOf('%')>=0){
254 obj.style.width = width;
255 obj.parentNode.style.width = width;
256 }else{
257 obj.style.width = width + 'px';
258 obj.parentNode.style.width = width + 'px';
259 }
260
261 if(height.indexOf('%')>=0){
262 //obj.style.height = height;
263 obj.parentNode.style.height = height;
264
265 }else{
266 //obj.style.height = height + 'px';
267 obj.parentNode.style.height = height + 'px';
268 }
269 obj.id = 'tableWidget' + tableWidget_tableCounter;
270 addEndCol(obj);
271
272 obj.cellSpacing = 0;
273 obj.cellPadding = 0;
274 obj.className='tableWidget';
275 var tHead = obj.getElementsByTagName('THEAD')[0];
276 var cells = tHead.getElementsByTagName('TD');
277 for(var no=0;no<cells.length;no++){
278 cells[no].className = 'tableWidget_headerCell';
279 cells[no].onselectstart = cancelTableWidgetEvent;
280 if(no==cells.length-1){
281 cells[no].style.borderRight = '0px';
282 }
283 if(sortArray[no]){
284 cells[no].onmouseover = highlightTableHeader;
285 cells[no].onmouseout = deHighlightTableHeader;
286 cells[no].onmousedown = mousedownTableHeader;
287 cells[no].onmouseup = highlightTableHeader;
288 cells[no].onclick = sortTable;
289
290 var img = document.createElement('IMG');
291 img.src = arrowImagePath + 'arrow_up.gif';
292 cells[no].appendChild(img);
293 img.style.visibility = 'hidden';
294
295 var img = document.createElement('IMG');
296 img.src = arrowImagePath + 'arrow_down.gif';
297 cells[no].appendChild(img);
298 img.style.display = 'none';
299
300
301 }else{
302 cells[no].style.cursor = 'default';
303 }
304
305
306 }
307 var tBody = obj.getElementsByTagName('TBODY')[0];
308 if(document.all && navigator.userAgent.indexOf('Opera')<0){
309 tBody.className='scrollingContent';
310 tBody.style.display='block';
311 }else{
312 tBody.className='scrollingContent';
313
314 if(tBody.offsetHeight>(tBody.parentNode.parentNode.offsetHeight - 50)) {
315 tBody.style.height = (obj.parentNode.clientHeight-tHead.offsetHeight) + 'px';
316 }else{
317 tBody.style.overflow='hidden';
318 }
319 if(navigator.userAgent.indexOf('Opera')>=0){
320 obj.parentNode.style.overflow = 'auto';
321 }
322 }
323
324 for(var no=1;no<obj.rows.length;no++){
325 obj.rows[no].onmouseover = highlightDataRow;
326 obj.rows[no].onmouseout = deHighlightDataRow;
327 for(var no2=0;no2<sortArray.length;no2++){ /* Right align numeric cells */
328 if(sortArray[no2] && sortArray[no2]=='N')obj.rows[no].cells[no2].style.textAlign='right';
329 }
330 }
331 for(var no2=0;no2<sortArray.length;no2++){ /* Right align numeric cells */
332 if(sortArray[no2] && sortArray[no2]=='N')obj.rows[0].cells[no2].style.textAlign='right';
333 }
334
335 tableWidget_tableCounter++;
336 }
337
338
339 function highlightDataRow()
340 {
341 if(navigator.userAgent.indexOf('Opera')>=0)return;
342 this.className='tableWidget_dataRollOver';
343 if(document.all){ // I.E fix for "jumping" headings
344 var divObj = this.parentNode.parentNode.parentNode;
345 var tHead = divObj.getElementsByTagName('TR')[0];
346 tHead.style.top = divObj.scrollTop + 'px';
347
348 }
349 }
350
351 function deHighlightDataRow()
352 {
353 if(navigator.userAgent.indexOf('Opera')>=0)return;
354 this.className=null;
355 if(document.all){ // I.E fix for "jumping" headings
356 var divObj = this.parentNode.parentNode.parentNode;
357 var tHead = divObj.getElementsByTagName('TR')[0];
358 tHead.style.top = divObj.scrollTop + 'px';
359 }
360 }
361
362 </SCRIPT>
363
364 <META content="MSHTML 6.00.5730.13" name=GENERATOR></HEAD>
365 <BODY>
366 <DIV class=widget_tableDiv>
367 <TABLE id=myTable>
368 <THEAD>
369 <TR>
370 <TD>Name</TD>
371 <TD>Age</TD>
372 <TD>Position</TD>
373 <TD>Income</TD>
374 <TD>Gender</TD></TR></THEAD>
375 <TBODY class=scrollingContent>
376 <TR>
377 <TD>John</TD>
378 <TD>37</TD>
379 <TD>Managing director</TD>
380 <TD>90.000</TD>
381 <TD>Male</TD></TR>
382 <TR>
383 <TD>Susan</TD>
384 <TD>34</TD>
385 <TD>Partner</TD>
386 <TD>90.000</TD>
387 <TD>Female</TD></TR>
388 <TR>
389 <TD>David</TD>
390 <TD>29</TD>
391 <TD>Head of production</TD>
392 <TD>70.000</TD>
393 <TD>Male</TD></TR>
394 <TR>
395 <TD>Laura</TD>
396 <TD>29</TD>
397 <TD>Head of marketing</TD>
398 <TD>70.000</TD>
399 <TD>Female</TD></TR>
400 <TR>
401 <TD>Kate</TD>
402 <TD>18</TD>
403 <TD>Marketing</TD>
404 <TD>50.000</TD>
405 <TD>Female</TD></TR>
406 <TR>
407 <TD>Mona</TD>
408 <TD>21</TD>
409 <TD>Marketing</TD>
410 <TD>53.000</TD>
411 <TD>Female</TD></TR>
412 <TR>
413 <TD>Mike</TD>
414 <TD>21</TD>
415 <TD>Marketing</TD>
416 <TD>53.000</TD>
417 <TD>Male</TD></TR>
418 <TR>
419 <TD>Mark</TD>
420 <TD>25</TD>
421 <TD>Production</TD>
422 <TD>52.000</TD>
423 <TD>Male</TD></TR>
424 <TR>
425 <TD>Peter</TD>
426 <TD>33</TD>
427 <TD>Production</TD>
428 <TD>55.000</TD>
429 <TD>Male</TD></TR>
430 <TR>
431 <TD>Jennifer</TD>
432 <TD>24</TD>
433 <TD>Production</TD>
434 <TD>49.000</TD>
435 <TD>Female</TD></TR>
436 <TR>
437 <TD>David</TD>
438 <TD>25</TD>
439 <TD>Photography</TD>
440 <TD>51.000</TD>
441 <TD>Male</TD></TR>
442 <TR>
443 <TD>Anna</TD>
444 <TD>42</TD>
445 <TD>Head of photography</TD>
446 <TD>56.000</TD>
447 <TD>Female</TD></TR>
448 <TR>
449 <TD>Rita</TD>
450 <TD>30</TD>
451 <TD>Photography</TD>
452 <TD>54.000</TD>
453 <TD>Female</TD></TR>
454 <TR>
455 <TD>Magnus</TD>
456 <TD>25</TD>
457 <TD>Freelancer</TD>
458 <TD>65.000</TD>
459 <TD>Male</TD></TR>
460 <TR>
461 <TD>Johnny</TD>
462 <TD>29</TD>
463 <TD>Freelancer</TD>
464 <TD>63.000</TD>
465 <TD>Male</TD></TR></TBODY></TABLE></DIV>
466 <SCRIPT type=text/javascript>
467 initTableWidget('myTable',500,250,Array('S','N',false,'N','S'));
468 </SCRIPT>
469 <BR><BR>
470 </BODY></HTML>
471
472
473 原文地址:http://www.corange.cn/archives/2010/04/3600.html
474