点击表格自动排序js+css代码
作者: zms! 日期: 2013.10.26 本文发布于2346天前 分类: 前端琐碎DIV/CSS/JS 相关：
<LINK
href="http://www.brainjar.com/common/default.css" type=text/css rel=stylesheet>
<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) {
// Get the table or table section to sort.
var tblEl = document.getElementById(id);
// The first time this function is called for a given table, set up an
// array of reverse sort flags.
if (tblEl.reverseSort == null) {
tblEl.reverseSort = new Array();
// Also, assume the team name column is initially sorted.
tblEl.lastColumn = 1;
}
// If this column has not been sorted before, set the initial sort direction.
if (tblEl.reverseSort[col] == null)
tblEl.reverseSort[col] = rev;
// If this column was the last one sorted, reverse its sort direction.
if (col == tblEl.lastColumn)
tblEl.reverseSort[col] = !tblEl.reverseSort[col];
// Remember this column as the last one sorted.
tblEl.lastColumn = col;
// Set the table display style to "none" - necessary for Netscape 6
// browsers.
var oldDsply = tblEl.style.display;
tblEl.style.display = "none";
// Sort the rows based on the content of the specified column using a
// selection sort.
var tmpEl;
var i, j;
var minVal, minIdx;
var testVal;
var cmp;
for (i = 0; i < tblEl.rows.length - 1; i++) {
// Assume the current row has the minimum value.
minIdx = i;
minVal = getTextValue(tblEl.rows[i].cells[col]);
// Search the rows that follow the current one for a smaller value.
for (j = i + 1; j < tblEl.rows.length; j++) {
testVal = getTextValue(tblEl.rows[j].cells[col]);
cmp = compareValues(minVal, testVal);
// Negate the comparison result if the reverse sort flag is set.
if (tblEl.reverseSort[col])
cmp = -cmp;
// Sort by the second column (team name) if those values are equal.
if (cmp == 0 && col != 1)
cmp = compareValues(getTextValue(tblEl.rows[minIdx].cells[1]),
getTextValue(tblEl.rows[j].cells[1]));
// If this row has a smaller value than the current minimum, remember its
// position and update the current minimum value.
if (cmp > 0) {
minIdx = j;
minVal = testVal;
}
}
// By now, we have the row with the smallest value. Remove it from the
// table and insert it before the current row.
if (minIdx > i) {
tmpEl = tblEl.removeChild(tblEl.rows[minIdx]);
tblEl.insertBefore(tmpEl, tblEl.rows[i]);
}
}
// Make it look pretty.
makePretty(tblEl, col);
// Set team rankings.
setRanks(tblEl, col, rev);
// Restore the table's display style.
tblEl.style.display = oldDsply;
return false;
}
//-----------------------------------------------------------------------------
// Functions to get and compare values during a sort.
//-----------------------------------------------------------------------------
// This code is necessary for browsers that don't reflect the DOM constants
// (like IE).
if (document.ELEMENT_NODE == null) {
document.ELEMENT_NODE = 1;
document.TEXT_NODE = 3;
}
function getTextValue(el) {
var i;
var s;
// Find and concatenate the values of all text nodes contained within the
// element.
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;
// If the values are numeric, convert them to floats.
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;
}
// Regular expressions for normalizing white space.
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;
}
//-----------------------------------------------------------------------------
// Functions to update the table appearance after a sort.
//-----------------------------------------------------------------------------
// Style class names.
var rowClsNm = "alternateRow";
var colClsNm = "sortedColumn";
// Regular expressions for setting class names.
var rowTest = new RegExp(rowClsNm, "gi");
var colTest = new RegExp(colClsNm, "gi");
function makePretty(tblEl, col) {
var i, j;
var rowEl, cellEl;
// Set style classes on each row to alternate their appearance.
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);
// Set style classes on each column (other than the name column) to
// highlight the one that was sorted.
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);
}
}
// Find the table header and highlight the column that was sorted.
var el = tblEl.parentNode.tHead;
rowEl = el.rows[el.rows.length - 1];
// Set style classes for each column as above.
for (i = 2; i < rowEl.cells.length; i++) {
cellEl = rowEl.cells[i];
cellEl.className = cellEl.className.replace(colTest, "");
// Highlight the header of the sorted column.
if (i == col)
cellEl.className += " " + colClsNm;
cellEl.className = normalizeString(cellEl.className);
}
}
function setRanks(tblEl, col, rev) {
// Determine whether to start at the top row of the table and go down or
// at the bottom row and work up. This is based on the current sort
// direction of the column and its reversed flag.
var i = 0;
var incr = 1;
if (tblEl.reverseSort[col])
rev = !rev;
if (rev) {
incr = -1;
i = tblEl.rows.length - 1;
}
// Now go through each row in that direction and assign it a rank by
// counting 1, 2, 3...
var count = 1;
var rank = count;
var curVal;
var lastVal = null;
// Note that this loop is skipped if the table was sorted on the name
// column.
while (col > 1 && i >= 0 && i < tblEl.rows.length) {
// Get the value of the sort column in this row.
curVal = getTextValue(tblEl.rows[i].cells[col]);
// On rows after the first, compare the sort value of this row to the
// previous one. If they differ, update the rank to match the current row
// count. (If they are the same, this row will get the same rank as the
// previous one.)
if (lastVal != null && compareValues(curVal, lastVal) != 0)
rank = count;
// Set the rank for this row.
tblEl.rows[i].rank = rank;
// Save the sort value of the current row for the next time around and bump
// the row counter and index.
lastVal = curVal;
count++;
i += incr;
}
// Now go through each row (from top to bottom) and display its rank. Note
// that when two or more rows are tied, the rank is shown on the first of
// those rows only.
var rowEl, cellEl;
var lastRank = 0;
// Go through the rows from top to bottom.
for (i = 0; i < tblEl.rows.length; i++) {
rowEl = tblEl.rows[i];
cellEl = rowEl.cells[0];
// Delete anything currently in the rank column.
while (cellEl.lastChild != null)
cellEl.removeChild(cellEl.lastChild);
// If this row's rank is different from the previous one, Insert a new text
// node with that rank.
if (col > 1 && rowEl.rank != lastRank) {
cellEl.appendChild(document.createTextNode(rowEl.rank));
lastRank = rowEl.rank;
}
}
}
</SCRIPT>
<META content="MSHTML 6.00.2600.0" name=GENERATOR></HEAD>
<P><!-- Defensive statistics table. -->
<TABLE cellSpacing=0 cellPadding=0 border=0>
<THEAD>
<TR>
<TH class=mainHeader colSpan=11>NFL 2001 Defensive 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('defTblBdy', 1, false);"
href="http://www.brainjar.com/dhtml/tablesort/">Team</A></TH>
<TH><SPAN title="Games Played">Gms</SPAN></TH>
<TH><A title="Total Yards Allowed"
onclick="this.blur(); return sortTable('defTblBdy', 3, false);"
href="http://www.brainjar.com/dhtml/tablesort/">Yds</A></TH>
<TH><A title="Yards Allowed Per Game"
onclick="this.blur(); return sortTable('defTblBdy', 4, false);"
href="http://www.brainjar.com/dhtml/tablesort/">Yds/G</A></TH>
<TH><A title="Total Rushing Yards Allowed"
onclick="this.blur(); return sortTable('defTblBdy', 5, false);"
href="http://www.brainjar.com/dhtml/tablesort/">RuYds</A></TH>
<TH><A title="Rushing Yards Allowed Per Game"
onclick="this.blur(); return sortTable('defTblBdy', 6, false);"
href="http://www.brainjar.com/dhtml/tablesort/">RuYds/G</A></TH>
<TH><A title="Total Passing Yards Allowed"
onclick="this.blur(); return sortTable('defTblBdy', 7, false);"
href="http://www.brainjar.com/dhtml/tablesort/">PaYds</A></TH>
<TH><A title="Passing Yards Allowed Per Game"
onclick="this.blur(); return sortTable('defTblBdy', 8, false);"
href="http://www.brainjar.com/dhtml/tablesort/">PaYds/G</A></TH>
<TH><A title="Total Points Allowed"
onclick="this.blur(); return sortTable('defTblBdy', 9, false);"
href="http://www.brainjar.com/dhtml/tablesort/">Pts</A></TH>
<TH><A title="Points Allowed Per Game"
onclick="this.blur(); return sortTable('defTblBdy', 10, false);"
href="http://www.brainjar.com/dhtml/tablesort/">Pts/G</A></TH></TR></THEAD>
<TBODY id=defTblBdy>
<TR class="">
<TD class=numeric></TD>
<TD class="">Arizona</TD>
<TD class=numeric>16</TD>
<TD class=numeric>5685</TD>
<TD class=numeric>355.3</TD>
<TD class=numeric>2087</TD>
<TD class=numeric>130.4</TD>
<TD class=numeric>3598</TD>
<TD class=numeric>224.9</TD>
<TD class=numeric>343</TD>
<TD class=numeric>21.4</TD></TR>
<TR class=alternateRow>
<TD class=numeric></TD>
<TD class="">Atlanta</TD>
<TD class=numeric>16</TD>
<TD class=numeric>5845</TD>
<TD class=numeric>365.3</TD>
<TD class=numeric>1943</TD>
<TD class=numeric>121.4</TD>
<TD class=numeric>3902</TD>
<TD class=numeric>243.9</TD>
<TD class=numeric>377</TD>
<TD class=numeric>23.6</TD></TR>
<TR class="">
<TD class=numeric></TD>
<TD class="">Baltimore</TD>
<TD class=numeric>16</TD>
<TD class=numeric>4267</TD>
<TD class=numeric>284.5</TD>
<TD class=numeric>1325</TD>
<TD class=numeric>88.3</TD>
<TD class=numeric>2942</TD>
<TD class=numeric>196.1</TD>
<TD class=numeric>262</TD>
<TD class=numeric>17.5</TD></TR>
<TR class=alternateRow>
<TD class=numeric></TD>
<TD class="">Buffalo</TD>
<TD class=numeric>16</TD>
<TD class=numeric>5292</TD>
<TD class=numeric>330.8</TD>
<TD class=numeric>2133</TD>
<TD class=numeric>133.3</TD>
<TD class=numeric>3159</TD>
<TD class=numeric>197.4</TD>
<TD class=numeric>420</TD>
<TD class=numeric>26.2</TD></TR>
<TR>
<TD class=numeric></TD>
<TD class="">Carolina</TD>
<TD class=numeric>16</TD>
<TD class=numeric>5943</TD>
<TD class=numeric>371.4</TD>
<TD class=numeric>2301</TD>
<TD class=numeric>143.8</TD>
<TD class=numeric>3642</TD>
<TD class=numeric>227.6</TD>
<TD class=numeric>410</TD>
<TD class=numeric>25.6</TD></TR>
<TR class=alternateRow>
<TD class=numeric></TD>
<TD class="">Chicago</TD>
<TD class=numeric>16</TD>
<TD class=numeric>4978</TD>
<TD class=numeric>311.1</TD>
<TD class=numeric>1313</TD>
<TD class=numeric>82.1</TD>
<TD class=numeric>3665</TD>
<TD class=numeric>229.1</TD>
<TD class=numeric>203</TD>
<TD class=numeric>12.7</TD></TR>
<TR>
<TD class=numeric></TD>
<TD class="">Cincinnati</TD>
<TD class=numeric>16</TD>
<TD class=numeric>4832</TD>
<TD class=numeric>302.0</TD>
<TD class=numeric>1675</TD>
<TD class=numeric>104.7</TD>
<TD class=numeric>3157</TD>
<TD class=numeric>197.3</TD>
<TD class=numeric>309</TD>
<TD class=numeric>19.3</TD></TR>
<TR class=alternateRow>
<TD class=numeric></TD>
<TD class="">Cleveland</TD>
<TD class=numeric>16</TD>
<TD class=numeric>5297</TD>
<TD class=numeric>331.1</TD>
<TD class=numeric>2208</TD>
<TD class=numeric>138.0</TD>
<TD class=numeric>3089</TD>
<TD class=numeric>193.1</TD>
<TD class=numeric>319</TD>
<TD class=numeric>19.9</TD></TR>
<TR>
<TD class=numeric></TD>
<TD class="">Dallas</TD>
<TD class=numeric>16</TD>
<TD class=numeric>4599</TD>
<TD class=numeric>287.4</TD>
<TD class=numeric>1710</TD>
<TD class=numeric>106.9</TD>
<TD class=numeric>2889</TD>
<TD class=numeric>180.6</TD>
<TD class=numeric>338</TD>
<TD class=numeric>21.1</TD></TR>
<TR class=alternateRow>
<TD class=numeric></TD>
<TD class="">Denver</TD>
<TD class=numeric>16</TD>
<TD class=numeric>4774</TD>
<TD class=numeric>298.4</TD>
<TD class=numeric>1492</TD>
<TD class=numeric>93.2</TD>
<TD class=numeric>3282</TD>
<TD class=numeric>205.1</TD>
<TD class=numeric>339</TD>
<TD class=numeric>21.2</TD></TR>
<TR>
<TD class=numeric></TD>
<TD class="">Detroit</TD>
<TD class=numeric>16</TD>
<TD class=numeric>5521</TD>
<TD class=numeric>345.1</TD>
<TD class=numeric>1993</TD>
<TD class=numeric>124.6</TD>
<TD class=numeric>3528</TD>
<TD class=numeric>220.5</TD>
<TD class=numeric>424</TD>
<TD class=numeric>26.5</TD></TR>
<TR class=alternateRow>
<TD class=numeric></TD>
<TD class="">Green Bay</TD>
<TD class=numeric>16</TD>
<TD class=numeric>4937</TD>
<TD class=numeric>308.6</TD>
<TD class=numeric>1769</TD>
<TD class=numeric>110.6</TD>
<TD class=numeric>3168</TD>
<TD class=numeric>198.0</TD>
<TD class=numeric>266</TD>
<TD class=numeric>16.6</TD></TR>
<TR>
<TD class=numeric></TD>
<TD class="">Indianapolis</TD>
<TD class=numeric>16</TD>
<TD class=numeric>5715</TD>
<TD class=numeric>357.2</TD>
<TD class=numeric>2115</TD>
<TD class=numeric>132.2</TD>
<TD class=numeric>3600</TD>
<TD class=numeric>225.0</TD>
<TD class=numeric>486</TD>
<TD class=numeric>30.4</TD></TR>
<TR class=alternateRow>
<TD class=numeric></TD>
<TD class="">Jacksonville</TD>
<TD class=numeric>16</TD>
<TD class=numeric>5070</TD>
<TD class=numeric>316.9</TD>
<TD class=numeric>1611</TD>
<TD class=numeric>100.7</TD>
<TD class=numeric>3459</TD>
<TD class=numeric>216.2</TD>
<TD class=numeric>286</TD>
<TD class=numeric>17.9</TD></TR>
<TR>
<TD class=numeric></TD>
<TD class="">Kansas City</TD>
<TD class=numeric>16</TD>
<TD class=numeric>5304</TD>
<TD class=numeric>331.5</TD>
<TD class=numeric>2140</TD>
<TD class=numeric>133.8</TD>
<TD class=numeric>3164</TD>
<TD class=numeric>197.8</TD>
<TD class=numeric>344</TD>
<TD class=numeric>21.5</TD></TR>
<TR class=alternateRow>
<TD class=numeric></TD>
<TD class="">Miami</TD>
<TD class=numeric>16</TD>
<TD class=numeric>4608</TD>
<TD class=numeric>288.0</TD>
<TD class=numeric>1779</TD>
<TD class=numeric>111.2</TD>
<TD class=numeric>2829</TD>
<TD class=numeric>176.8</TD>
<TD class=numeric>290</TD>
<TD class=numeric>18.1</TD></TR>
<TR>
<TD class=numeric></TD>
<TD class="">Minnesota</TD>
<TD class=numeric>16</TD>
<TD class=numeric>5315</TD>
<TD class=numeric>354.3</TD>
<TD class=numeric>2087</TD>
<TD class=numeric>139.1</TD>
<TD class=numeric>3228</TD>
<TD class=numeric>215.2</TD>
<TD class=numeric>371</TD>
<TD class=numeric>24.7</TD></TR>
<TR class=alternateRow>
<TD class=numeric></TD>
<TD class="">New England</TD>
<TD class=numeric>16</TD>
<TD class=numeric>5352</TD>
<TD class=numeric>334.5</TD>
<TD class=numeric>1855</TD>
<TD class=numeric>115.9</TD>
<TD class=numeric>3497</TD>
<TD class=numeric>218.6</TD>
<TD class=numeric>272</TD>
<TD class=numeric>17.0</TD></TR>
<TR>
<TD class=numeric></TD>
<TD class="">New Orleans</TD>
<TD class=numeric>16</TD>
<TD class=numeric>5070</TD>
<TD class=numeric>316.9</TD>
<TD class=numeric>1715</TD>
<TD class=numeric>107.2</TD>
<TD class=numeric>3355</TD>
<TD class=numeric>209.7</TD>
<TD class=numeric>409</TD>
<TD class=numeric>25.6</TD></TR>
</TBODY></TABLE>
</P>
讨论区
你可能也喜欢
chm文件转换成html文件，解决chm文件无法使用浏览器打开的问题 2018.05.20,11 pv
键盘对应的键值 2018.04.15,8 pv
Bootstrap弹出层(modal)垂直居中简单解决方案(无需修改js) 2017.09.25,9 pv
强制H5必须用微信打开的判断 2017.01.05,10 pv
MUI语法琐碎 2016.11.09,8 pv
一些前端工程师必须知道的开源前端框架 2016.11.04,12 pv
