JavaScript实现表格排序代码
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
}
10
TD {
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
<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: 0px9
}10
TD {
TD 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: nowrap12
}13
TH {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: nowrap15
}16
TD.numeric {17
TEXT-ALIGN: right18
}19
TH {20
BACKGROUND-COLOR: #c0c0c021
}22
TH.mainHeader {23
COLOR: #ffffff; BACKGROUND-COLOR: #808080; TEXT-ALIGN: left24
}25
TH A {26
COLOR: #000080; TEXT-DECORATION: none27
}28
TH A:visited {29
COLOR: #00008030
}31
TH A:active {32
COLOR: #800000; TEXT-DECORATION: underline33
}34
TH A:hover {35
COLOR: #800000; TEXT-DECORATION: underline36
}37
TR.alternateRow {38
BACKGROUND-COLOR: #e0e0e039
}40
TD.sortedColumn {41
BACKGROUND-COLOR: #f0f0f042
}43
TH.sortedColumn {44
BACKGROUND-COLOR: #b0b0b045
}46
TR.alternateRow TD.sortedColumn {47
BACKGROUND-COLOR: #d0d0d048
}49
</STYLE>50
51
<SCRIPT type=text/javascript>52
53
function 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 an59
// 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 a83
// 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 its109
// 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 the117
// 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
136
if (document.ELEMENT_NODE == null) {137
document.ELEMENT_NODE = 1;138
document.TEXT_NODE = 3;139
}140
141
function 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
else153
// Use recursion to get text within sub-elements.154
s += getTextValue(el.childNodes[i]);155
156
return normalizeString(s);157
}158
159
function 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 1177
return -1;178
}179
180
// Regular expressions for normalizing white space.181
var whtSpEnds = new RegExp("^\\s*|\\s*$", "g");182
var whtSpMult = new RegExp("\\s\\s+", "g");183
184
function 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.197
var rowClsNm = "alternateRow";198
var colClsNm = "sortedColumn";199
200
// Regular expressions for setting class names.201
var rowTest = new RegExp(rowClsNm, "gi");202
var colTest = new RegExp(colClsNm, "gi");203
204
function 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) to217
// 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
241
function setRanks(tblEl, col, rev) {242
243
// Determine whether to start at the top row of the table and go down or244
// at the bottom row and work up. This is based on the current sort245
// 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 by257
// counting 1, 2, 3258
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 name265
// 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 the272
// previous one. If they differ, update the rank to match the current row273
// count. (If they are the same, this row will get the same rank as the274
// 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 bump281
// 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. Note288
// that when two or more rows are tied, the rank is shown on the first of289
// 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 text302
// 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
浙公网安备 33010602011771号