Home > Article > Web Front-end > JavaScript method to implement table click sorting_javascript skills
JavaScript method to implement table click sorting_javascript skills
- WBOYOriginal
- 2016-05-16 15:59:461259browse
本文实例讲述了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程序设计有所帮助。
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：The most streamlined JavaScript method to achieve mouse dragging effect_javascript skillsNext article：The most streamlined JavaScript method to achieve mouse dragging effect_javascript skills
Related articles
See more- An in-depth analysis of the Bootstrap list group component
- Detailed explanation of JavaScript function currying
- Complete example of JS password generation and strength detection (with demo source code download)
- Angularjs integrates WeChat UI (weui)
- How to quickly switch between Traditional Chinese and Simplified Chinese with JavaScript and the trick for websites to support switching between Simplified and Traditional Chinese_javascript skills