1
<
html
>
2 < head >
3 < meta http-equiv ="Content-Type" content ="text/html; charset=gb2312" >
4 < title > JavaScript实现表格排序代码 - www.webdm.cn </ title >
5 </ head >
6
7 < STYLE type =text/css > TABLE {}{
8 BORDER-RIGHT: #000000 2px solid; BORDER-TOP: #000000 2px solid; BORDER-LEFT: #000000 2px solid; BORDER-BOTTOM: #000000 2px solid; border-spacing: 0px; cell-spacing: 0px
9}
10TD {}{
11 PADDING-RIGHT: 0.5em; PADDING-LEFT: 0.5em; FONT-SIZE: 10pt; PADDING-BOTTOM: 2px; PADDING-TOP: 2px; FONT-FAMILY: Arial, Helvetica, sans-serif; WHITE-SPACE: nowrap
12}
13TH {}{
14 PADDING-RIGHT: 0.5em; PADDING-LEFT: 0.5em; FONT-SIZE: 10pt; PADDING-BOTTOM: 2px; PADDING-TOP: 2px; FONT-FAMILY: Arial, Helvetica, sans-serif; WHITE-SPACE: nowrap
15}
16TD.numeric {}{
17 TEXT-ALIGN: right
18}
19TH {}{
20 BACKGROUND-COLOR: #c0c0c0
21}
22TH.mainHeader {}{
23 COLOR: #ffffff; BACKGROUND-COLOR: #808080; TEXT-ALIGN: left
24}
25TH A {}{
26 COLOR: #000080; TEXT-DECORATION: none
27}
28TH A:visited {}{
29 COLOR: #000080
30}
31TH A:active {}{
32 COLOR: #800000; TEXT-DECORATION: underline
33}
34TH A:hover {}{
35 COLOR: #800000; TEXT-DECORATION: underline
36}
37TR.alternateRow {}{
38 BACKGROUND-COLOR: #e0e0e0
39}
40TD.sortedColumn {}{
41 BACKGROUND-COLOR: #f0f0f0
42}
43TH.sortedColumn {}{
44 BACKGROUND-COLOR: #b0b0b0
45}
46TR.alternateRow TD.sortedColumn {}{
47 BACKGROUND-COLOR: #d0d0d0
48}
49 </ STYLE >
50
51 < SCRIPT type =text/javascript >
52
53function sortTable(id, col, rev) {
54
55 // Get the table or table section to sort.
56 var tblEl = document.getElementById(id);
57
58 // The first time this function is called for a given table, set up an
59 // array of reverse sort flags.
60 if (tblEl.reverseSort == null) {
61 tblEl.reverseSort = new Array();
62 // Also, assume the team name column is initially sorted.
63 tblEl.lastColumn = 1;
64 }
65
66 // If this column has not been sorted before, set the initial sort direction.
67 if (tblEl.reverseSort[col] == null)
68 tblEl.reverseSort[col] = rev;
69
70 // If this column was the last one sorted, reverse its sort direction.
71 if (col == tblEl.lastColumn)
72 tblEl.reverseSort[col] = !tblEl.reverseSort[col];
73
74 // Remember this column as the last one sorted.
75 tblEl.lastColumn = col;
76
77 // Set the table display style to "none" - necessary for Netscape 6
78 // browsers.
79 var oldDsply = tblEl.style.display;
80 tblEl.style.display = "none";
81
82 // Sort the rows based on the content of the specified column using a
83 // selection sort.
84
85 var tmpEl;
86 var i, j;
87 var minVal, minIdx;
88 var testVal;
89 var cmp;
90
91 for (i = 0; i < tblEl.rows.length - 1; i++) {
92
93 // Assume the current row has the minimum value.
94 minIdx = i;
95 minVal = getTextValue(tblEl.rows[i].cells[col]);
96
97 // Search the rows that follow the current one for a smaller value.
98 for (j = i + 1; j < tblEl.rows.length; j++) {
99 testVal = getTextValue(tblEl.rows[j].cells[col]);
100 cmp = compareValues(minVal, testVal);
101 // Negate the comparison result if the reverse sort flag is set.
102 if (tblEl.reverseSort[col])
103 cmp = -cmp;
104 // Sort by the second column (team name) if those values are equal.
105 if (cmp == 0 && col != 1)
106 cmp = compareValues(getTextValue(tblEl.rows[minIdx].cells[1]),
107 getTextValue(tblEl.rows[j].cells[1]));
108 // If this row has a smaller value than the current minimum, remember its
109 // position and update the current minimum value.
110 if (cmp > 0) {
111 minIdx = j;
112 minVal = testVal;
113 }
114 }
115
116 // By now, we have the row with the smallest value. Remove it from the
117 // table and insert it before the current row.
118 if (minIdx > i) {
119 tmpEl = tblEl.removeChild(tblEl.rows[minIdx]);
120 tblEl.insertBefore(tmpEl, tblEl.rows[i]);
121 }
122 }
123
124 // Make it look pretty.
125 makePretty(tblEl, col);
126
127 // Set team rankings.
128 setRanks(tblEl, col, rev);
129
130 // Restore the table's display style.
131 tblEl.style.display = oldDsply;
132
133 return false;
134}
135
136if (document.ELEMENT_NODE == null) {
137 document.ELEMENT_NODE = 1;
138 document.TEXT_NODE = 3;
139}
140
141function getTextValue(el) {
142
143 var i;
144 var s;
145 s = "";
146 for (i = 0; i < el.childNodes.length; i++)
147 if (el.childNodes[i].nodeType == document.TEXT_NODE)
148 s += el.childNodes[i].nodeValue;
149 else if (el.childNodes[i].nodeType == document.ELEMENT_NODE &&
150 el.childNodes[i].tagName == "BR")
151 s += " ";
152 else
153 // Use recursion to get text within sub-elements.
154 s += getTextValue(el.childNodes[i]);
155
156 return normalizeString(s);
157}
158
159function compareValues(v1, v2) {
160
161 var f1, f2;
162
163 // If the values are numeric, convert them to floats.
164
165 f1 = parseFloat(v1);
166 f2 = parseFloat(v2);
167 if (!isNaN(f1) && !isNaN(f2)) {
168 v1 = f1;
169 v2 = f2;
170 }
171
172 // Compare the two values.
173 if (v1 == v2)
174 return 0;
175 if (v1 > v2)
176 return 1
177 return -1;
178}
179
180// Regular expressions for normalizing white space.
181var whtSpEnds = new RegExp("^\\s*|\\s*$", "g");
182var whtSpMult = new RegExp("\\s\\s+", "g");
183
184function normalizeString(s) {
185
186 s = s.replace(whtSpMult, " "); // Collapse any multiple whites space.
187 s = s.replace(whtSpEnds, ""); // Remove leading or trailing white space.
188
189 return s;
190}
191
192//-----------------------------------------------------------------------------
193// Functions to update the table appearance after a sort.
194//-----------------------------------------------------------------------------
195
196// Style class names.
197var rowClsNm = "alternateRow";
198var colClsNm = "sortedColumn";
199
200// Regular expressions for setting class names.
201var rowTest = new RegExp(rowClsNm, "gi");
202var colTest = new RegExp(colClsNm, "gi");
203
204function makePretty(tblEl, col) {
205
206 var i, j;
207 var rowEl, cellEl;
208
209 // Set style classes on each row to alternate their appearance.
210 for (i = 0; i < tblEl.rows.length; i++) {
211 rowEl = tblEl.rows[i];
212 rowEl.className = rowEl.className.replace(rowTest, "");
213 if (i % 2 != 0)
214 rowEl.className += " " + rowClsNm;
215 rowEl.className = normalizeString(rowEl.className);
216 // Set style classes on each column (other than the name column) to
217 // highlight the one that was sorted.
218 for (j = 2; j < tblEl.rows[i].cells.length; j++) {
219 cellEl = rowEl.cells[j];
220 cellEl.className = cellEl.className.replace(colTest, "");
221 if (j == col)
222 cellEl.className += " " + colClsNm;
223 cellEl.className = normalizeString(cellEl.className);
224 }
225 }
226
227 // Find the table header and highlight the column that was sorted.
228 var el = tblEl.parentNode.tHead;
229 rowEl = el.rows[el.rows.length - 1];
230 // Set style classes for each column as above.
231 for (i = 2; i < rowEl.cells.length; i++) {
232 cellEl = rowEl.cells[i];
233 cellEl.className = cellEl.className.replace(colTest, "");
234 // Highlight the header of the sorted column.
235 if (i == col)
236 cellEl.className += " " + colClsNm;
237 cellEl.className = normalizeString(cellEl.className);
238 }
239}
240
241function setRanks(tblEl, col, rev) {
242
243 // Determine whether to start at the top row of the table and go down or
244 // at the bottom row and work up. This is based on the current sort
245 // direction of the column and its reversed flag.
246
247 var i = 0;
248 var incr = 1;
249 if (tblEl.reverseSort[col])
250 rev = !rev;
251 if (rev) {
252 incr = -1;
253 i = tblEl.rows.length - 1;
254 }
255
256 // Now go through each row in that direction and assign it a rank by
257 // counting 1, 2, 3
258
259 var count = 1;
260 var rank = count;
261 var curVal;
262 var lastVal = null;
263
264 // Note that this loop is skipped if the table was sorted on the name
265 // column.
266 while (col > 1 && i >= 0 && i < tblEl.rows.length) {
267
268 // Get the value of the sort column in this row.
269 curVal = getTextValue(tblEl.rows[i].cells[col]);
270
271 // On rows after the first, compare the sort value of this row to the
272 // previous one. If they differ, update the rank to match the current row
273 // count. (If they are the same, this row will get the same rank as the
274 // previous one.)
275 if (lastVal != null && compareValues(curVal, lastVal) != 0)
276 rank = count;
277 // Set the rank for this row.
278 tblEl.rows[i].rank = rank;
279
280 // Save the sort value of the current row for the next time around and bump
281 // the row counter and index.
282 lastVal = curVal;
283 count++;
284 i += incr;
285 }
286
287 // Now go through each row (from top to bottom) and display its rank. Note
288 // that when two or more rows are tied, the rank is shown on the first of
289 // those rows only.
290
291 var rowEl, cellEl;
292 var lastRank = 0;
293
294 // Go through the rows from top to bottom.
295 for (i = 0; i < tblEl.rows.length; i++) {
296 rowEl = tblEl.rows[i];
297 cellEl = rowEl.cells[0];
298 // Delete anything currently in the rank column.
299 while (cellEl.lastChild != null)
300 cellEl.removeChild(cellEl.lastChild);
301 // If this row's rank is different from the previous one, Insert a new text
302 // node with that rank.
303 if (col > 1 && rowEl.rank != lastRank) {
304 cellEl.appendChild(document.createTextNode(rowEl.rank));
305 lastRank = rowEl.rank;
306 }
307 }
308}
309
310 </ SCRIPT >
311
312 < META content ="MSHTML 6.00.2600.0" name =GENERATOR ></ HEAD >
313 < BODY >
314
315 <!-- Offensive statistics table. -->
316 < TABLE cellSpacing =0 cellPadding =0 border =0 >
317 < THEAD >
318 < TR >
319 < TH class =mainHeader colSpan =11 > NFL 2001 Offensive Stats </ TH ></ TR >
320 < TR >
321 < TH style ="TEXT-ALIGN: left" > Rank </ TH >
322 < TH style ="TEXT-ALIGN: left" >< A title ="Team Name"
323 onclick ="this.blur(); return sortTable('offTblBdy', 1, false);"
324 href ="#" > Team </ A ></ TH >
325 < TH >< SPAN title ="Games Played" > Gms </ SPAN ></ TH >
326 < TH >< A title ="Total Yards"
327 onclick ="this.blur(); return sortTable('offTblBdy', 3, true);"
328 href ="#" > Yds </ A ></ TH >
329 < TH >< A title ="Yards Per Game"
330 onclick ="this.blur(); return sortTable('offTblBdy', 4, true);"
331 href ="#" > Yds/G </ A ></ TH >
332 < TH >< A title ="Total Rushing Yards"
333 onclick ="this.blur(); return sortTable('offTblBdy', 5, true);"
334 href ="#" > RuYds </ A ></ TH >
335 < TH >< A title ="Rushing Yards Per Game"
336 onclick ="this.blur(); return sortTable('offTblBdy', 6, true);"
337 href ="#" > RuYds/G </ A ></ TH >
338 < TH >< A title ="Total Passing Yards"
339 onclick ="this.blur(); return sortTable('offTblBdy', 7, true);"
340 href ="#" > PaYds </ A ></ TH >
341 < TH >< A title ="Passing Yards Per Game"
342 onclick ="this.blur(); return sortTable('offTblBdy', 8, true);"
343 href ="#" > PaYds/G </ A ></ TH >
344 < TH >< A title ="Total Points Scored"
345 onclick ="this.blur(); return sortTable('offTblBdy', 9, true);"
346 href ="#" > Pts </ A ></ TH >
347 < TH >< A title ="Points Per Game"
348 onclick ="this.blur(); return sortTable('offTblBdy', 10, true);"
349 href ="#" > Pts/G </ A ></ TH ></ TR ></ THEAD >
350 < TBODY id =offTblBdy >
351 < TR >
352 < TD class =numeric ></ TD >
353 < TD > Arizona </ TD >
354 < TD class =numeric > 16 </ TD >
355 < TD class =numeric > 4898 </ TD >
356 < TD class =numeric > 306.1 </ TD >
357 < TD class =numeric > 1449 </ TD >
358 < TD class =numeric > 90.6 </ TD >
359 < TD class =numeric > 3449 </ TD >
360 < TD class =numeric > 215.6 </ TD >
361 < TD class =numeric > 295 </ TD >
362 < TD class =numeric > 18.4 </ TD ></ TR >
363 < TR class =alternateRow >
364 < TD class =numeric ></ TD >
365 < TD > Atlanta </ TD >
366 < TD class =numeric > 16 </ TD >
367 < TD class =numeric > 5070 </ TD >
368 < TD class =numeric > 316.9 </ TD >
369 < TD class =numeric > 1773 </ TD >
370 < TD class =numeric > 110.8 </ TD >
371 < TD class =numeric > 3297 </ TD >
372 < TD class =numeric > 206.1 </ TD >
373 < TD class =numeric > 291 </ TD >
374 < TD class =numeric > 18.2 </ TD ></ TR >
375 < TR >
376 < TD class =numeric ></ TD >
377 < TD > Baltimore </ TD >
378 < TD class =numeric > 16 </ TD >
379 < TD class =numeric > 4773 </ TD >
380 < TD class =numeric > 318.2 </ TD >
381 < TD class =numeric > 1598 </ TD >
382 < TD class =numeric > 106.5 </ TD >
383 < TD class =numeric > 3175 </ TD >
384 < TD class =numeric > 211.7 </ TD >
385 < TD class =numeric > 284 </ TD >
386 < TD class =numeric > 18.9 </ TD ></ TR >
387 < TR class =alternateRow >
388 < TD class =numeric ></ TD >
389 < TD > Buffalo </ TD >
390 < TD class =numeric > 16 </ TD >
391 < TD class =numeric > 5137 </ TD >
392 < TD class =numeric > 321.1 </ TD >
393 < TD class =numeric > 1686 </ TD >
394 < TD class =numeric > 105.4 </ TD >
395 < TD class =numeric > 3451 </ TD >
396 < TD class =numeric > 215.7 </ TD >
397 < TD class =numeric > 265 </ TD >
398 < TD class =numeric > 16.6 </ TD ></ TR >
399 < TR >
400 < TD class =numeric ></ TD >
401 < TD > Carolina </ TD >
402 < TD class =numeric > 16 </ TD >
403 < TD class =numeric > 4254 </ TD >
404 < TD class =numeric > 265.9 </ TD >
405 < TD class =numeric > 1372 </ TD >
406 < TD class =numeric > 85.8 </ TD >
407 < TD class =numeric > 2882 </ TD >
408 < TD class =numeric > 180.1 </ TD >
409 < TD class =numeric > 253 </ TD >
410 < TD class =numeric > 15.8 </ TD ></ TR >
411 < TR class =alternateRow >
412 < TD class =numeric ></ TD >
413 < TD > Chicago </ TD >
414 < TD class =numeric > 16 </ TD >
415 < TD class =numeric > 4694 </ TD >
416 < TD class =numeric > 293.4 </ TD >
417 < TD class =numeric > 1742 </ TD >
418 < TD class =numeric > 108.9 </ TD >
419 < TD class =numeric > 2952 </ TD >
420 < TD class =numeric > 184.5 </ TD >
421 < TD class =numeric > 338 </ TD >
422 < TD class =numeric > 21.1 </ TD ></ TR >
423 < TR >
424 < TD class =numeric ></ TD >
425 < TD > Cincinnati </ TD >
426 < TD class =numeric > 16 </ TD >
427 < TD class =numeric > 4800 </ TD >
428 < TD class =numeric > 300.0 </ TD >
429 < TD class =numeric > 1712 </ TD >
430 < TD class =numeric > 107.0 </ TD >
431 < TD class =numeric > 3088 </ TD >
432 < TD class =numeric > 193.0 </ TD >
433 < TD class =numeric > 226 </ TD >
434 < TD class =numeric > 14.1 </ TD ></ TR >
435 < TR class =alternateRow >
436 < TD class =numeric ></ TD >
437 < TD > Cleveland </ TD >
438 < TD class =numeric > 16 </ TD >
439 < TD class =numeric > 4152 </ TD >
440 < TD class =numeric > 259.5 </ TD >
441 < TD class =numeric > 1351 </ TD >
442 < TD class =numeric > 84.4 </ TD >
443 < TD class =numeric > 2801 </ TD >
444 < TD class =numeric > 175.1 </ TD >
445 < TD class =numeric > 285 </ TD >
446 < TD class =numeric > 17.8 </ TD ></ TR >
447 < TR >
448 < TD class =numeric ></ TD >
449 < TD > Dallas </ TD >
450 < TD class =numeric > 16 </ TD >
451 < TD class =numeric > 4402 </ TD >
452 < TD class =numeric > 275.1 </ TD >
453 < TD class =numeric > 2184 </ TD >
454 < TD class =numeric > 136.5 </ TD >
455 < TD class =numeric > 2218 </ TD >
456 < TD class =numeric > 138.6 </ TD >
457 < TD class =numeric > 246 </ TD >
458 < TD class =numeric > 15.4 </ TD ></ TR >
459 < TR class =alternateRow >
460 < TD class =numeric ></ TD >
461 < TD > Denver </ TD >
462 < TD class =numeric > 16 </ TD >
463 < TD class =numeric > 4817 </ TD >
464 < TD class =numeric > 301.1 </ TD >
465 < TD class =numeric > 1877 </ TD >
466 < TD class =numeric > 117.3 </ TD >
467 < TD class =numeric > 2940 </ TD >
468 < TD class =numeric > 183.8 </ TD >
469 < TD class =numeric > 340 </ TD >
470 < TD class =numeric > 21.2 </ TD ></ TR >
471 < TR >
472 < TD class =numeric ></ TD >
473 < TD > Detroit </ TD >
474 < TD class =numeric > 16 </ TD >
475 < TD class =numeric > 4994 </ TD >
476 < TD class =numeric > 312.1 </ TD >
477 < TD class =numeric > 1398 </ TD >
478 < TD class =numeric > 87.4 </ TD >
479 < TD class =numeric > 3596 </ TD >
480 < TD class =numeric > 224.8 </ TD >
481 < TD class =numeric > 270 </ TD >
482 < TD class =numeric > 16.9 </ TD ></ TR >
483 < TR class =alternateRow >
484 < TD class =numeric ></ TD >
485 < TD > Green Bay </ TD >
486 < TD class =numeric > 16 </ TD >
487 < TD class =numeric > 5463 </ TD >
488 < TD class =numeric > 341.4 </ TD >
489 < TD class =numeric > 1693 </ TD >
490 < TD class =numeric > 105.8 </ TD >
491 < TD class =numeric > 3770 </ TD >
492 < TD class =numeric > 235.6 </ TD >
493 < TD class =numeric > 390 </ TD >
494 < TD class =numeric > 24.4 </ TD ></ TR >
495 < TR >
496 < TD class =numeric ></ TD >
497 < TD > Indianapolis </ TD >
498 < TD class =numeric > 16 </ TD >
499 < TD class =numeric > 5955 </ TD >
500 < TD class =numeric > 372.2 </ TD >
501 < TD class =numeric > 1966 </ TD >
502 < TD class =numeric > 122.9 </ TD >
503 < TD class =numeric > 3989 </ TD >
504 < TD class =numeric > 249.3 </ TD >
505 < TD class =numeric > 413 </ TD >
506 < TD class =numeric > 25.8 </ TD ></ TR >
507 < TR class =alternateRow >
508 < TD class =numeric ></ TD >
509 < TD > Jacksonville </ TD >
510 < TD class =numeric > 16 </ TD >
511 < TD class =numeric > 4840 </ TD >
512 < TD class =numeric > 302.5 </ TD >
513 < TD class =numeric > 1600 </ TD >
514 < TD class =numeric > 100.0 </ TD >
515 < TD class =numeric > 3240 </ TD >
516 < TD class =numeric > 202.5 </ TD >
517 < TD class =numeric > 294 </ TD >
518 < TD class =numeric > 18.4 </ TD ></ TR >
519 < TR >
520 < TD class =numeric ></ TD >
521 < TD > Kansas City </ TD >
522 < TD class =numeric > 16 </ TD >
523 < TD class =numeric > 5673 </ TD >
524 < TD class =numeric > 354.6 </ TD >
525 < TD class =numeric > 2008 </ TD >
526 < TD class =numeric > 125.5 </ TD >
527 < TD class =numeric > 3665 </ TD >
528 < TD class =numeric > 229.1 </ TD >
529 < TD class =numeric > 320 </ TD >
530 < TD class =numeric > 20.0 </ TD ></ TR >
531 < TR class =alternateRow >
532 < TD class =numeric ></ TD >
533 < TD > Miami </ TD >
534 < TD class =numeric > 16 </ TD >
535 < TD class =numeric > 4821 </ TD >
536 < TD class =numeric > 301.3 </ TD >
537 < TD class =numeric > 1664 </ TD >
538 < TD class =numeric > 104.0 </ TD >
539 < TD class =numeric > 3157 </ TD >
540 < TD class =numeric > 197.3 </ TD >
541 < TD class =numeric > 344 </ TD >
542 < TD class =numeric > 21.5 </ TD ></ TR >
543 < TR >
544 < TD class =numeric ></ TD >
545 < TD > Minnesota </ TD >
546 < TD class =numeric > 16 </ TD >
547 < TD class =numeric > 5006 </ TD >
548 < TD class =numeric > 333.7 </ TD >
549 < TD class =numeric > 1523 </ TD >
550 < TD class =numeric > 101.5 </ TD >
551 < TD class =numeric > 3483 </ TD >
552 < TD class =numeric > 232.2 </ TD >
553 < TD class =numeric > 287 </ TD >
554 < TD class =numeric > 19.1 </ TD ></ TR >
555 < TR class =alternateRow >
556 < TD class =numeric ></ TD >
557 < TD > New England </ TD >
558 < TD class =numeric > 16 </ TD >
559 < TD class =numeric > 4882 </ TD >
560 < TD class =numeric > 305.1 </ TD >
561 < TD class =numeric > 1793 </ TD >
562 < TD class =numeric > 112.1 </ TD >
563 < TD class =numeric > 3089 </ TD >
564 < TD class =numeric > 193.1 </ TD >
565 < TD class =numeric > 371 </ TD >
566 < TD class =numeric > 23.2 </ TD ></ TR >
567 < TR >
568 < TD class =numeric ></ TD >
569 < TD > New Orleans </ TD >
570 < TD class =numeric > 16 </ TD >
571 < TD class =numeric > 5226 </ TD >
572 < TD class =numeric > 326.6 </ TD >
573 < TD class =numeric > 1712 </ TD >
574 < TD class =numeric > 107.0 </ TD >
575 < TD class =numeric > 3514 </ TD >
576 < TD class =numeric > 219.6 </ TD >
577 < TD class =numeric > 333 </ TD >
578 < TD class =numeric > 20.8 </ TD ></ TR >
579 < TR class =alternateRow >
580 < TD class =numeric ></ TD >
581 < TD > New York Giants </ TD >
582 < TD class =numeric > 16 </ TD >
583 < TD class =numeric > 5335 </ TD >
584 < TD class =numeric > 333.4 </ TD >
585 < TD class =numeric > 1777 </ TD >
586 < TD class =numeric > 111.1 </ TD >
587 < TD class =numeric > 3558 </ TD >
588 < TD class =numeric > 222.4 </ TD >
589 < TD class =numeric > 294 </ TD >
590 < TD class =numeric > 18.4 </ TD ></ TR >
591 </ TBODY ></ TABLE >
592 </ BODY ></ HTML >
593
594
2 < head >
3 < meta http-equiv ="Content-Type" content ="text/html; charset=gb2312" >
4 < title > JavaScript实现表格排序代码 - www.webdm.cn </ title >
5 </ head >
6
7 < STYLE type =text/css > TABLE {}{
8 BORDER-RIGHT: #000000 2px solid; BORDER-TOP: #000000 2px solid; BORDER-LEFT: #000000 2px solid; BORDER-BOTTOM: #000000 2px solid; border-spacing: 0px; cell-spacing: 0px
9}
10TD {}{
11 PADDING-RIGHT: 0.5em; PADDING-LEFT: 0.5em; FONT-SIZE: 10pt; PADDING-BOTTOM: 2px; PADDING-TOP: 2px; FONT-FAMILY: Arial, Helvetica, sans-serif; WHITE-SPACE: nowrap
12}
13TH {}{
14 PADDING-RIGHT: 0.5em; PADDING-LEFT: 0.5em; FONT-SIZE: 10pt; PADDING-BOTTOM: 2px; PADDING-TOP: 2px; FONT-FAMILY: Arial, Helvetica, sans-serif; WHITE-SPACE: nowrap
15}
16TD.numeric {}{
17 TEXT-ALIGN: right
18}
19TH {}{
20 BACKGROUND-COLOR: #c0c0c0
21}
22TH.mainHeader {}{
23 COLOR: #ffffff; BACKGROUND-COLOR: #808080; TEXT-ALIGN: left
24}
25TH A {}{
26 COLOR: #000080; TEXT-DECORATION: none
27}
28TH A:visited {}{
29 COLOR: #000080
30}
31TH A:active {}{
32 COLOR: #800000; TEXT-DECORATION: underline
33}
34TH A:hover {}{
35 COLOR: #800000; TEXT-DECORATION: underline
36}
37TR.alternateRow {}{
38 BACKGROUND-COLOR: #e0e0e0
39}
40TD.sortedColumn {}{
41 BACKGROUND-COLOR: #f0f0f0
42}
43TH.sortedColumn {}{
44 BACKGROUND-COLOR: #b0b0b0
45}
46TR.alternateRow TD.sortedColumn {}{
47 BACKGROUND-COLOR: #d0d0d0
48}
49 </ STYLE >
50
51 < SCRIPT type =text/javascript >
52
53function sortTable(id, col, rev) {
54
55 // Get the table or table section to sort.
56 var tblEl = document.getElementById(id);
57
58 // The first time this function is called for a given table, set up an
59 // array of reverse sort flags.
60 if (tblEl.reverseSort == null) {
61 tblEl.reverseSort = new Array();
62 // Also, assume the team name column is initially sorted.
63 tblEl.lastColumn = 1;
64 }
65
66 // If this column has not been sorted before, set the initial sort direction.
67 if (tblEl.reverseSort[col] == null)
68 tblEl.reverseSort[col] = rev;
69
70 // If this column was the last one sorted, reverse its sort direction.
71 if (col == tblEl.lastColumn)
72 tblEl.reverseSort[col] = !tblEl.reverseSort[col];
73
74 // Remember this column as the last one sorted.
75 tblEl.lastColumn = col;
76
77 // Set the table display style to "none" - necessary for Netscape 6
78 // browsers.
79 var oldDsply = tblEl.style.display;
80 tblEl.style.display = "none";
81
82 // Sort the rows based on the content of the specified column using a
83 // selection sort.
84
85 var tmpEl;
86 var i, j;
87 var minVal, minIdx;
88 var testVal;
89 var cmp;
90
91 for (i = 0; i < tblEl.rows.length - 1; i++) {
92
93 // Assume the current row has the minimum value.
94 minIdx = i;
95 minVal = getTextValue(tblEl.rows[i].cells[col]);
96
97 // Search the rows that follow the current one for a smaller value.
98 for (j = i + 1; j < tblEl.rows.length; j++) {
99 testVal = getTextValue(tblEl.rows[j].cells[col]);
100 cmp = compareValues(minVal, testVal);
101 // Negate the comparison result if the reverse sort flag is set.
102 if (tblEl.reverseSort[col])
103 cmp = -cmp;
104 // Sort by the second column (team name) if those values are equal.
105 if (cmp == 0 && col != 1)
106 cmp = compareValues(getTextValue(tblEl.rows[minIdx].cells[1]),
107 getTextValue(tblEl.rows[j].cells[1]));
108 // If this row has a smaller value than the current minimum, remember its
109 // position and update the current minimum value.
110 if (cmp > 0) {
111 minIdx = j;
112 minVal = testVal;
113 }
114 }
115
116 // By now, we have the row with the smallest value. Remove it from the
117 // table and insert it before the current row.
118 if (minIdx > i) {
119 tmpEl = tblEl.removeChild(tblEl.rows[minIdx]);
120 tblEl.insertBefore(tmpEl, tblEl.rows[i]);
121 }
122 }
123
124 // Make it look pretty.
125 makePretty(tblEl, col);
126
127 // Set team rankings.
128 setRanks(tblEl, col, rev);
129
130 // Restore the table's display style.
131 tblEl.style.display = oldDsply;
132
133 return false;
134}
135
136if (document.ELEMENT_NODE == null) {
137 document.ELEMENT_NODE = 1;
138 document.TEXT_NODE = 3;
139}
140
141function getTextValue(el) {
142
143 var i;
144 var s;
145 s = "";
146 for (i = 0; i < el.childNodes.length; i++)
147 if (el.childNodes[i].nodeType == document.TEXT_NODE)
148 s += el.childNodes[i].nodeValue;
149 else if (el.childNodes[i].nodeType == document.ELEMENT_NODE &&
150 el.childNodes[i].tagName == "BR")
151 s += " ";
152 else
153 // Use recursion to get text within sub-elements.
154 s += getTextValue(el.childNodes[i]);
155
156 return normalizeString(s);
157}
158
159function compareValues(v1, v2) {
160
161 var f1, f2;
162
163 // If the values are numeric, convert them to floats.
164
165 f1 = parseFloat(v1);
166 f2 = parseFloat(v2);
167 if (!isNaN(f1) && !isNaN(f2)) {
168 v1 = f1;
169 v2 = f2;
170 }
171
172 // Compare the two values.
173 if (v1 == v2)
174 return 0;
175 if (v1 > v2)
176 return 1
177 return -1;
178}
179
180// Regular expressions for normalizing white space.
181var whtSpEnds = new RegExp("^\\s*|\\s*$", "g");
182var whtSpMult = new RegExp("\\s\\s+", "g");
183
184function normalizeString(s) {
185
186 s = s.replace(whtSpMult, " "); // Collapse any multiple whites space.
187 s = s.replace(whtSpEnds, ""); // Remove leading or trailing white space.
188
189 return s;
190}
191
192//-----------------------------------------------------------------------------
193// Functions to update the table appearance after a sort.
194//-----------------------------------------------------------------------------
195
196// Style class names.
197var rowClsNm = "alternateRow";
198var colClsNm = "sortedColumn";
199
200// Regular expressions for setting class names.
201var rowTest = new RegExp(rowClsNm, "gi");
202var colTest = new RegExp(colClsNm, "gi");
203
204function makePretty(tblEl, col) {
205
206 var i, j;
207 var rowEl, cellEl;
208
209 // Set style classes on each row to alternate their appearance.
210 for (i = 0; i < tblEl.rows.length; i++) {
211 rowEl = tblEl.rows[i];
212 rowEl.className = rowEl.className.replace(rowTest, "");
213 if (i % 2 != 0)
214 rowEl.className += " " + rowClsNm;
215 rowEl.className = normalizeString(rowEl.className);
216 // Set style classes on each column (other than the name column) to
217 // highlight the one that was sorted.
218 for (j = 2; j < tblEl.rows[i].cells.length; j++) {
219 cellEl = rowEl.cells[j];
220 cellEl.className = cellEl.className.replace(colTest, "");
221 if (j == col)
222 cellEl.className += " " + colClsNm;
223 cellEl.className = normalizeString(cellEl.className);
224 }
225 }
226
227 // Find the table header and highlight the column that was sorted.
228 var el = tblEl.parentNode.tHead;
229 rowEl = el.rows[el.rows.length - 1];
230 // Set style classes for each column as above.
231 for (i = 2; i < rowEl.cells.length; i++) {
232 cellEl = rowEl.cells[i];
233 cellEl.className = cellEl.className.replace(colTest, "");
234 // Highlight the header of the sorted column.
235 if (i == col)
236 cellEl.className += " " + colClsNm;
237 cellEl.className = normalizeString(cellEl.className);
238 }
239}
240
241function setRanks(tblEl, col, rev) {
242
243 // Determine whether to start at the top row of the table and go down or
244 // at the bottom row and work up. This is based on the current sort
245 // direction of the column and its reversed flag.
246
247 var i = 0;
248 var incr = 1;
249 if (tblEl.reverseSort[col])
250 rev = !rev;
251 if (rev) {
252 incr = -1;
253 i = tblEl.rows.length - 1;
254 }
255
256 // Now go through each row in that direction and assign it a rank by
257 // counting 1, 2, 3
258
259 var count = 1;
260 var rank = count;
261 var curVal;
262 var lastVal = null;
263
264 // Note that this loop is skipped if the table was sorted on the name
265 // column.
266 while (col > 1 && i >= 0 && i < tblEl.rows.length) {
267
268 // Get the value of the sort column in this row.
269 curVal = getTextValue(tblEl.rows[i].cells[col]);
270
271 // On rows after the first, compare the sort value of this row to the
272 // previous one. If they differ, update the rank to match the current row
273 // count. (If they are the same, this row will get the same rank as the
274 // previous one.)
275 if (lastVal != null && compareValues(curVal, lastVal) != 0)
276 rank = count;
277 // Set the rank for this row.
278 tblEl.rows[i].rank = rank;
279
280 // Save the sort value of the current row for the next time around and bump
281 // the row counter and index.
282 lastVal = curVal;
283 count++;
284 i += incr;
285 }
286
287 // Now go through each row (from top to bottom) and display its rank. Note
288 // that when two or more rows are tied, the rank is shown on the first of
289 // those rows only.
290
291 var rowEl, cellEl;
292 var lastRank = 0;
293
294 // Go through the rows from top to bottom.
295 for (i = 0; i < tblEl.rows.length; i++) {
296 rowEl = tblEl.rows[i];
297 cellEl = rowEl.cells[0];
298 // Delete anything currently in the rank column.
299 while (cellEl.lastChild != null)
300 cellEl.removeChild(cellEl.lastChild);
301 // If this row's rank is different from the previous one, Insert a new text
302 // node with that rank.
303 if (col > 1 && rowEl.rank != lastRank) {
304 cellEl.appendChild(document.createTextNode(rowEl.rank));
305 lastRank = rowEl.rank;
306 }
307 }
308}
309
310 </ SCRIPT >
311
312 < META content ="MSHTML 6.00.2600.0" name =GENERATOR ></ HEAD >
313 < BODY >
314
315 <!-- Offensive statistics table. -->
316 < TABLE cellSpacing =0 cellPadding =0 border =0 >
317 < THEAD >
318 < TR >
319 < TH class =mainHeader colSpan =11 > NFL 2001 Offensive Stats </ TH ></ TR >
320 < TR >
321 < TH style ="TEXT-ALIGN: left" > Rank </ TH >
322 < TH style ="TEXT-ALIGN: left" >< A title ="Team Name"
323 onclick ="this.blur(); return sortTable('offTblBdy', 1, false);"
324 href ="#" > Team </ A ></ TH >
325 < TH >< SPAN title ="Games Played" > Gms </ SPAN ></ TH >
326 < TH >< A title ="Total Yards"
327 onclick ="this.blur(); return sortTable('offTblBdy', 3, true);"
328 href ="#" > Yds </ A ></ TH >
329 < TH >< A title ="Yards Per Game"
330 onclick ="this.blur(); return sortTable('offTblBdy', 4, true);"
331 href ="#" > Yds/G </ A ></ TH >
332 < TH >< A title ="Total Rushing Yards"
333 onclick ="this.blur(); return sortTable('offTblBdy', 5, true);"
334 href ="#" > RuYds </ A ></ TH >
335 < TH >< A title ="Rushing Yards Per Game"
336 onclick ="this.blur(); return sortTable('offTblBdy', 6, true);"
337 href ="#" > RuYds/G </ A ></ TH >
338 < TH >< A title ="Total Passing Yards"
339 onclick ="this.blur(); return sortTable('offTblBdy', 7, true);"
340 href ="#" > PaYds </ A ></ TH >
341 < TH >< A title ="Passing Yards Per Game"
342 onclick ="this.blur(); return sortTable('offTblBdy', 8, true);"
343 href ="#" > PaYds/G </ A ></ TH >
344 < TH >< A title ="Total Points Scored"
345 onclick ="this.blur(); return sortTable('offTblBdy', 9, true);"
346 href ="#" > Pts </ A ></ TH >
347 < TH >< A title ="Points Per Game"
348 onclick ="this.blur(); return sortTable('offTblBdy', 10, true);"
349 href ="#" > Pts/G </ A ></ TH ></ TR ></ THEAD >
350 < TBODY id =offTblBdy >
351 < TR >
352 < TD class =numeric ></ TD >
353 < TD > Arizona </ TD >
354 < TD class =numeric > 16 </ TD >
355 < TD class =numeric > 4898 </ TD >
356 < TD class =numeric > 306.1 </ TD >
357 < TD class =numeric > 1449 </ TD >
358 < TD class =numeric > 90.6 </ TD >
359 < TD class =numeric > 3449 </ TD >
360 < TD class =numeric > 215.6 </ TD >
361 < TD class =numeric > 295 </ TD >
362 < TD class =numeric > 18.4 </ TD ></ TR >
363 < TR class =alternateRow >
364 < TD class =numeric ></ TD >
365 < TD > Atlanta </ TD >
366 < TD class =numeric > 16 </ TD >
367 < TD class =numeric > 5070 </ TD >
368 < TD class =numeric > 316.9 </ TD >
369 < TD class =numeric > 1773 </ TD >
370 < TD class =numeric > 110.8 </ TD >
371 < TD class =numeric > 3297 </ TD >
372 < TD class =numeric > 206.1 </ TD >
373 < TD class =numeric > 291 </ TD >
374 < TD class =numeric > 18.2 </ TD ></ TR >
375 < TR >
376 < TD class =numeric ></ TD >
377 < TD > Baltimore </ TD >
378 < TD class =numeric > 16 </ TD >
379 < TD class =numeric > 4773 </ TD >
380 < TD class =numeric > 318.2 </ TD >
381 < TD class =numeric > 1598 </ TD >
382 < TD class =numeric > 106.5 </ TD >
383 < TD class =numeric > 3175 </ TD >
384 < TD class =numeric > 211.7 </ TD >
385 < TD class =numeric > 284 </ TD >
386 < TD class =numeric > 18.9 </ TD ></ TR >
387 < TR class =alternateRow >
388 < TD class =numeric ></ TD >
389 < TD > Buffalo </ TD >
390 < TD class =numeric > 16 </ TD >
391 < TD class =numeric > 5137 </ TD >
392 < TD class =numeric > 321.1 </ TD >
393 < TD class =numeric > 1686 </ TD >
394 < TD class =numeric > 105.4 </ TD >
395 < TD class =numeric > 3451 </ TD >
396 < TD class =numeric > 215.7 </ TD >
397 < TD class =numeric > 265 </ TD >
398 < TD class =numeric > 16.6 </ TD ></ TR >
399 < TR >
400 < TD class =numeric ></ TD >
401 < TD > Carolina </ TD >
402 < TD class =numeric > 16 </ TD >
403 < TD class =numeric > 4254 </ TD >
404 < TD class =numeric > 265.9 </ TD >
405 < TD class =numeric > 1372 </ TD >
406 < TD class =numeric > 85.8 </ TD >
407 < TD class =numeric > 2882 </ TD >
408 < TD class =numeric > 180.1 </ TD >
409 < TD class =numeric > 253 </ TD >
410 < TD class =numeric > 15.8 </ TD ></ TR >
411 < TR class =alternateRow >
412 < TD class =numeric ></ TD >
413 < TD > Chicago </ TD >
414 < TD class =numeric > 16 </ TD >
415 < TD class =numeric > 4694 </ TD >
416 < TD class =numeric > 293.4 </ TD >
417 < TD class =numeric > 1742 </ TD >
418 < TD class =numeric > 108.9 </ TD >
419 < TD class =numeric > 2952 </ TD >
420 < TD class =numeric > 184.5 </ TD >
421 < TD class =numeric > 338 </ TD >
422 < TD class =numeric > 21.1 </ TD ></ TR >
423 < TR >
424 < TD class =numeric ></ TD >
425 < TD > Cincinnati </ TD >
426 < TD class =numeric > 16 </ TD >
427 < TD class =numeric > 4800 </ TD >
428 < TD class =numeric > 300.0 </ TD >
429 < TD class =numeric > 1712 </ TD >
430 < TD class =numeric > 107.0 </ TD >
431 < TD class =numeric > 3088 </ TD >
432 < TD class =numeric > 193.0 </ TD >
433 < TD class =numeric > 226 </ TD >
434 < TD class =numeric > 14.1 </ TD ></ TR >
435 < TR class =alternateRow >
436 < TD class =numeric ></ TD >
437 < TD > Cleveland </ TD >
438 < TD class =numeric > 16 </ TD >
439 < TD class =numeric > 4152 </ TD >
440 < TD class =numeric > 259.5 </ TD >
441 < TD class =numeric > 1351 </ TD >
442 < TD class =numeric > 84.4 </ TD >
443 < TD class =numeric > 2801 </ TD >
444 < TD class =numeric > 175.1 </ TD >
445 < TD class =numeric > 285 </ TD >
446 < TD class =numeric > 17.8 </ TD ></ TR >
447 < TR >
448 < TD class =numeric ></ TD >
449 < TD > Dallas </ TD >
450 < TD class =numeric > 16 </ TD >
451 < TD class =numeric > 4402 </ TD >
452 < TD class =numeric > 275.1 </ TD >
453 < TD class =numeric > 2184 </ TD >
454 < TD class =numeric > 136.5 </ TD >
455 < TD class =numeric > 2218 </ TD >
456 < TD class =numeric > 138.6 </ TD >
457 < TD class =numeric > 246 </ TD >
458 < TD class =numeric > 15.4 </ TD ></ TR >
459 < TR class =alternateRow >
460 < TD class =numeric ></ TD >
461 < TD > Denver </ TD >
462 < TD class =numeric > 16 </ TD >
463 < TD class =numeric > 4817 </ TD >
464 < TD class =numeric > 301.1 </ TD >
465 < TD class =numeric > 1877 </ TD >
466 < TD class =numeric > 117.3 </ TD >
467 < TD class =numeric > 2940 </ TD >
468 < TD class =numeric > 183.8 </ TD >
469 < TD class =numeric > 340 </ TD >
470 < TD class =numeric > 21.2 </ TD ></ TR >
471 < TR >
472 < TD class =numeric ></ TD >
473 < TD > Detroit </ TD >
474 < TD class =numeric > 16 </ TD >
475 < TD class =numeric > 4994 </ TD >
476 < TD class =numeric > 312.1 </ TD >
477 < TD class =numeric > 1398 </ TD >
478 < TD class =numeric > 87.4 </ TD >
479 < TD class =numeric > 3596 </ TD >
480 < TD class =numeric > 224.8 </ TD >
481 < TD class =numeric > 270 </ TD >
482 < TD class =numeric > 16.9 </ TD ></ TR >
483 < TR class =alternateRow >
484 < TD class =numeric ></ TD >
485 < TD > Green Bay </ TD >
486 < TD class =numeric > 16 </ TD >
487 < TD class =numeric > 5463 </ TD >
488 < TD class =numeric > 341.4 </ TD >
489 < TD class =numeric > 1693 </ TD >
490 < TD class =numeric > 105.8 </ TD >
491 < TD class =numeric > 3770 </ TD >
492 < TD class =numeric > 235.6 </ TD >
493 < TD class =numeric > 390 </ TD >
494 < TD class =numeric > 24.4 </ TD ></ TR >
495 < TR >
496 < TD class =numeric ></ TD >
497 < TD > Indianapolis </ TD >
498 < TD class =numeric > 16 </ TD >
499 < TD class =numeric > 5955 </ TD >
500 < TD class =numeric > 372.2 </ TD >
501 < TD class =numeric > 1966 </ TD >
502 < TD class =numeric > 122.9 </ TD >
503 < TD class =numeric > 3989 </ TD >
504 < TD class =numeric > 249.3 </ TD >
505 < TD class =numeric > 413 </ TD >
506 < TD class =numeric > 25.8 </ TD ></ TR >
507 < TR class =alternateRow >
508 < TD class =numeric ></ TD >
509 < TD > Jacksonville </ TD >
510 < TD class =numeric > 16 </ TD >
511 < TD class =numeric > 4840 </ TD >
512 < TD class =numeric > 302.5 </ TD >
513 < TD class =numeric > 1600 </ TD >
514 < TD class =numeric > 100.0 </ TD >
515 < TD class =numeric > 3240 </ TD >
516 < TD class =numeric > 202.5 </ TD >
517 < TD class =numeric > 294 </ TD >
518 < TD class =numeric > 18.4 </ TD ></ TR >
519 < TR >
520 < TD class =numeric ></ TD >
521 < TD > Kansas City </ TD >
522 < TD class =numeric > 16 </ TD >
523 < TD class =numeric > 5673 </ TD >
524 < TD class =numeric > 354.6 </ TD >
525 < TD class =numeric > 2008 </ TD >
526 < TD class =numeric > 125.5 </ TD >
527 < TD class =numeric > 3665 </ TD >
528 < TD class =numeric > 229.1 </ TD >
529 < TD class =numeric > 320 </ TD >
530 < TD class =numeric > 20.0 </ TD ></ TR >
531 < TR class =alternateRow >
532 < TD class =numeric ></ TD >
533 < TD > Miami </ TD >
534 < TD class =numeric > 16 </ TD >
535 < TD class =numeric > 4821 </ TD >
536 < TD class =numeric > 301.3 </ TD >
537 < TD class =numeric > 1664 </ TD >
538 < TD class =numeric > 104.0 </ TD >
539 < TD class =numeric > 3157 </ TD >
540 < TD class =numeric > 197.3 </ TD >
541 < TD class =numeric > 344 </ TD >
542 < TD class =numeric > 21.5 </ TD ></ TR >
543 < TR >
544 < TD class =numeric ></ TD >
545 < TD > Minnesota </ TD >
546 < TD class =numeric > 16 </ TD >
547 < TD class =numeric > 5006 </ TD >
548 < TD class =numeric > 333.7 </ TD >
549 < TD class =numeric > 1523 </ TD >
550 < TD class =numeric > 101.5 </ TD >
551 < TD class =numeric > 3483 </ TD >
552 < TD class =numeric > 232.2 </ TD >
553 < TD class =numeric > 287 </ TD >
554 < TD class =numeric > 19.1 </ TD ></ TR >
555 < TR class =alternateRow >
556 < TD class =numeric ></ TD >
557 < TD > New England </ TD >
558 < TD class =numeric > 16 </ TD >
559 < TD class =numeric > 4882 </ TD >
560 < TD class =numeric > 305.1 </ TD >
561 < TD class =numeric > 1793 </ TD >
562 < TD class =numeric > 112.1 </ TD >
563 < TD class =numeric > 3089 </ TD >
564 < TD class =numeric > 193.1 </ TD >
565 < TD class =numeric > 371 </ TD >
566 < TD class =numeric > 23.2 </ TD ></ TR >
567 < TR >
568 < TD class =numeric ></ TD >
569 < TD > New Orleans </ TD >
570 < TD class =numeric > 16 </ TD >
571 < TD class =numeric > 5226 </ TD >
572 < TD class =numeric > 326.6 </ TD >
573 < TD class =numeric > 1712 </ TD >
574 < TD class =numeric > 107.0 </ TD >
575 < TD class =numeric > 3514 </ TD >
576 < TD class =numeric > 219.6 </ TD >
577 < TD class =numeric > 333 </ TD >
578 < TD class =numeric > 20.8 </ TD ></ TR >
579 < TR class =alternateRow >
580 < TD class =numeric ></ TD >
581 < TD > New York Giants </ TD >
582 < TD class =numeric > 16 </ TD >
583 < TD class =numeric > 5335 </ TD >
584 < TD class =numeric > 333.4 </ TD >
585 < TD class =numeric > 1777 </ TD >
586 < TD class =numeric > 111.1 </ TD >
587 < TD class =numeric > 3558 </ TD >
588 < TD class =numeric > 222.4 </ TD >
589 < TD class =numeric > 294 </ TD >
590 < TD class =numeric > 18.4 </ TD ></ TR >
591 </ TBODY ></ TABLE >
592 </ BODY ></ HTML >
593
594