当前位置: 首页 > JavaScript > JavaScript实现表格点击排序的方法

JavaScript实现表格点击排序的方法

本文实例讲述了JavaScript实现表格点击排序的方法。分享给大家供大家参考。具体分析如下:

这里实现基于JS的表格点击排序效果,可以根据表格内的数据大小自动按顺序排列,股票网站常会见到这种功能。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>表格排序</title>
</head>
<STYLE type=text/css>TABLE { 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
}
TD { 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
}
TH { 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
}
TD.numeric { TEXT-ALIGN: right
}
TH { BACKGROUND-COLOR: #c0c0c0
}
TH.mainHeader { COLOR: #ffffff; BACKGROUND-COLOR: #808080; TEXT-ALIGN: left
}
TH A { COLOR: #000080; TEXT-DECORATION: none
}
TH A:visited { COLOR: #000080
}
TH A:active { COLOR: #800000; TEXT-DECORATION: underline
}
TH A:hover { COLOR: #800000; TEXT-DECORATION: underline
}
TR.alternateRow { BACKGROUND-COLOR: #e0e0e0
}
TD.sortedColumn { BACKGROUND-COLOR: #f0f0f0
}
TH.sortedColumn { BACKGROUND-COLOR: #b0b0b0
}
TR.alternateRow TD.sortedColumn { BACKGROUND-COLOR: #d0d0d0
}
</STYLE>
<SCRIPT type=text/javascript>
function sortTable(id, col, rev) { var tblEl = document.getElementById(id); if (tblEl.reverseSort == null) { tblEl.reverseSort = new Array(); tblEl.lastColumn = 1; } if (tblEl.reverseSort[col] == null) tblEl.reverseSort[col] = rev; if (col == tblEl.lastColumn) tblEl.reverseSort[col] = !tblEl.reverseSort[col]; tblEl.lastColumn = col; var oldDsply = tblEl.style.display; tblEl.style.display = "none"; var tmpEl; var i, j; var minVal, minIdx; var testVal; var cmp; for (i = 0; i < tblEl.rows.length - 1; i++) { minIdx = i; minVal = getTextValue(tblEl.rows[i].cells[col]); for (j = i + 1; j < tblEl.rows.length; j++) { testVal = getTextValue(tblEl.rows[j].cells[col]); cmp = compareValues(minVal, testVal); if (tblEl.reverseSort[col]) cmp = -cmp; if (cmp == 0 && col != 1) cmp = compareValues(getTextValue(tblEl.rows[minIdx].cells[1]), getTextValue(tblEl.rows[j].cells[1])); if (cmp > 0) { minIdx = j; minVal = testVal; } } if (minIdx > i) { tmpEl = tblEl.removeChild(tblEl.rows[minIdx]); tblEl.insertBefore(tmpEl, tblEl.rows[i]); } } makePretty(tblEl, col); setRanks(tblEl, col, rev); tblEl.style.display = oldDsply; return false;
}
if (document.ELEMENT_NODE == null) { document.ELEMENT_NODE = 1; document.TEXT_NODE = 3;
}
function getTextValue(el) { var i; var s; s = ""; for (i = 0; i < el.childNodes.length; i++) if (el.childNodes[i].nodeType == document.TEXT_NODE) s += el.childNodes[i].nodeValue; else if (el.childNodes[i].nodeType == document.ELEMENT_NODE && el.childNodes[i].tagName == "BR") s += " "; else // Use recursion to get text within sub-elements. s += getTextValue(el.childNodes[i]); return normalizeString(s);
}
function compareValues(v1, v2) { var f1, f2; f1 = parseFloat(v1); f2 = parseFloat(v2); if (!isNaN(f1) && !isNaN(f2)) { v1 = f1; v2 = f2; } // Compare the two values. if (v1 == v2) return 0; if (v1 > v2) return 1 return -1;
}
var whtSpEnds = new RegExp("^\\s*|\\s*$", "g");
var whtSpMult = new RegExp("\\s\\s+", "g");
function normalizeString(s) { s = s.replace(whtSpMult, " "); // Collapse any multiple whites space. s = s.replace(whtSpEnds, ""); // Remove leading or trailing white space. return s;
}
var rowClsNm = "alternateRow";
var colClsNm = "sortedColumn";
var rowTest = new RegExp(rowClsNm, "gi");
var colTest = new RegExp(colClsNm, "gi");
function makePretty(tblEl, col) { var i, j; var rowEl, cellEl; for (i = 0; i < tblEl.rows.length; i++) { rowEl = tblEl.rows[i]; rowEl.className = rowEl.className.replace(rowTest, ""); if (i % 2 != 0) rowEl.className += " " + rowClsNm; rowEl.className = normalizeString(rowEl.className); for (j = 2; j < tblEl.rows[i].cells.length; j++) { cellEl = rowEl.cells[j]; cellEl.className = cellEl.className.replace(colTest, ""); if (j == col) cellEl.className += " " + colClsNm; cellEl.className = normalizeString(cellEl.className); } } var el = tblEl.parentNode.tHead; rowEl = el.rows[el.rows.length - 1]; for (i = 2; i < rowEl.cells.length; i++) { cellEl = rowEl.cells[i]; cellEl.className = cellEl.className.replace(colTest, ""); if (i == col) cellEl.className += " " + colClsNm; cellEl.className = normalizeString(cellEl.className); }
}
function setRanks(tblEl, col, rev) { var i = 0; var incr = 1; if (tblEl.reverseSort[col]) rev = !rev; if (rev) { incr = -1; i = tblEl.rows.length - 1; } var count = 1; var rank = count; var curVal; var lastVal = null; while (col > 1 && i >= 0 && i < tblEl.rows.length) { curVal = getTextValue(tblEl.rows[i].cells[col]); if (lastVal != null && compareValues(curVal, lastVal) != 0) rank = count; tblEl.rows[i].rank = rank; lastVal = curVal; count++; i += incr; } var rowEl, cellEl; var lastRank = 0; for (i = 0; i < tblEl.rows.length; i++) { rowEl = tblEl.rows[i]; cellEl = rowEl.cells[0]; while (cellEl.lastChild != null) cellEl.removeChild(cellEl.lastChild); if (col > 1 && rowEl.rank != lastRank) { cellEl.appendChild(document.createTextNode(rowEl.rank)); lastRank = rowEl.rank; } }
}
</SCRIPT>
</HEAD>
<BODY>
<!-- Offensive statistics table. -->
<TABLE cellSpacing=0 cellPadding=0 border=0> <THEAD> <TR> <TH class=mainHeader colSpan=11>NFL 2001 Offensive Stats</TH></TR> <TR> <TH style="TEXT-ALIGN: left">Rank</TH> <TH style="TEXT-ALIGN: left"><A title="Team Name" onclick="this.blur(); return sortTable('offTblBdy', 1, false);" href="#">Team</A></TH> <TH><SPAN title="Games Played">Gms</SPAN></TH> <TH><A title="Total Yards" onclick="this.blur(); return sortTable('offTblBdy', 3, true);" href="#">Yds</A></TH> <TH><A title="Yards Per Game" onclick="this.blur(); return sortTable('offTblBdy', 4, true);" href="#">Yds/G</A></TH> <TH><A title="Total Rushing Yards" onclick="this.blur(); return sortTable('offTblBdy', 5, true);" href="#">RuYds</A></TH> <TH><A title="Rushing Yards Per Game" onclick="this.blur(); return sortTable('offTblBdy', 6, true);" href="#">RuYds/G</A></TH> <TH><A title="Total Passing Yards" onclick="this.blur(); return sortTable('offTblBdy', 7, true);" href="#">PaYds</A></TH> <TH><A title="Passing Yards Per Game" onclick="this.blur(); return sortTable('offTblBdy', 8, true);" href="#">PaYds/G</A></TH> <TH><A title="Total Points Scored" onclick="this.blur(); return sortTable('offTblBdy', 9, true);" href="#">Pts</A></TH> <TH><A title="Points Per Game" onclick="this.blur(); return sortTable('offTblBdy', 10, true);" href="#">Pts/G</A></TH></TR></THEAD> <TBODY id=offTblBdy> <TR> <TD class=numeric></TD> <TD>Arizona</TD> <TD class=numeric>16</TD> <TD class=numeric>4898</TD> <TD class=numeric>306.1</TD> <TD class=numeric>1449</TD> <TD class=numeric>90.6</TD> <TD class=numeric>3449</TD> <TD class=numeric>215.6</TD> <TD class=numeric>295</TD> <TD class=numeric>18.4</TD></TR> <TR class=alternateRow> <TD class=numeric></TD> <TD>Atlanta</TD> <TD class=numeric>16</TD> <TD class=numeric>5070</TD> <TD class=numeric>316.9</TD> <TD class=numeric>1773</TD> <TD class=numeric>110.8</TD> <TD class=numeric>3297</TD> <TD class=numeric>206.1</TD> <TD class=numeric>291</TD> <TD class=numeric>18.2</TD></TR>
<TR>
<TD class=numeric></TD> <TD>Detroit</TD> <TD class=numeric>16</TD> <TD class=numeric>4994</TD> <TD class=numeric>312.1</TD> <TD class=numeric>1398</TD> <TD class=numeric>87.4</TD> <TD class=numeric>3596</TD> <TD class=numeric>224.8</TD> <TD class=numeric>270</TD> <TD class=numeric>16.9</TD></TR> <TR class=alternateRow> <TD class=numeric></TD> <TD>Jacksonville</TD> <TD class=numeric>16</TD> <TD class=numeric>4840</TD> <TD class=numeric>302.5</TD> <TD class=numeric>1600</TD> <TD class=numeric>100.0</TD> <TD class=numeric>3240</TD> <TD class=numeric>202.5</TD> <TD class=numeric>294</TD> <TD class=numeric>18.4</TD></TR> <TR> <TD class=numeric></TD> <TD>Kansas City</TD> <TD class=numeric>16</TD> <TD class=numeric>5673</TD> <TD class=numeric>354.6</TD> <TD class=numeric>2008</TD> <TD class=numeric>125.5</TD> <TD class=numeric>3665</TD> <TD class=numeric>229.1</TD> <TD class=numeric>320</TD> <TD class=numeric>20.0</TD></TR> <TR class=alternateRow> <TD class=numeric></TD> <TD>Miami</TD> <TD class=numeric>16</TD> <TD class=numeric>4821</TD> <TD class=numeric>301.3</TD> <TD class=numeric>1664</TD> <TD class=numeric>104.0</TD> <TD class=numeric>3157</TD> <TD class=numeric>197.3</TD> <TD class=numeric>344</TD> <TD class=numeric>21.5</TD></TR> <TR> <TD class=numeric></TD> <TD>Minnesota</TD> <TD class=numeric>16</TD> <TD class=numeric>5006</TD> <TD class=numeric>333.7</TD> <TD class=numeric>1523</TD> <TD class=numeric>101.5</TD> <TD class=numeric>3483</TD> <TD class=numeric>232.2</TD> <TD class=numeric>287</TD> <TD class=numeric>19.1</TD></TR> <TR class=alternateRow> <TD class=numeric></TD> <TD>New England</TD> <TD class=numeric>16</TD> <TD class=numeric>4882</TD> <TD class=numeric>305.1</TD> <TD class=numeric>1793</TD> <TD class=numeric>112.1</TD> <TD class=numeric>3089</TD> <TD class=numeric>193.1</TD> <TD class=numeric>371</TD> <TD class=numeric>23.2</TD></TR> <TR> <TD class=numeric></TD> <TD>New Orleans</TD> <TD class=numeric>16</TD> <TD class=numeric>5226</TD> <TD class=numeric>326.6</TD> <TD class=numeric>1712</TD> <TD class=numeric>107.0</TD> <TD class=numeric>3514</TD> <TD class=numeric>219.6</TD> <TD class=numeric>333</TD> <TD class=numeric>20.8</TD></TR> <TR class=alternateRow> <TD class=numeric></TD> <TD>New York Giants</TD> <TD class=numeric>16</TD> <TD class=numeric>5335</TD> <TD class=numeric>333.4</TD> <TD class=numeric>1777</TD> <TD class=numeric>111.1</TD> <TD class=numeric>3558</TD> <TD class=numeric>222.4</TD> <TD class=numeric>294</TD> <TD class=numeric>18.4</TD></TR>
</TBODY></TABLE>
</BODY>
</HTML>

希望本文所述对大家的javascript程序设计有所帮助。

您可能感兴趣的文章:

相关文章