代码
  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