本文实例讲述了JavaScript实现表格点击排序的.方法。分享给大家供大家参考。具体分析如下：
这里实现基于JS的表格点击排序效果，可以根据表格内的数据大小自动按顺序排列，股票网站常会见到这种功能。
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}ric { TEXT-ALIGN: right}TH { BACKGROUND-COLOR: #c0c0c0}Header { 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}rnateRow { BACKGROUND-COLOR: #e0e0e0}edColumn { BACKGROUND-COLOR: #f0f0f0}edColumn { BACKGROUND-COLOR: #b0b0b0}rnateRow edColumn { BACKGROUND-COLOR: #d0d0d0}
function sortTable(id, col, rev) { var tblEl = lementById(id); if (rseSort == null) { rseSort = new Array(); Column = 1; } if (rseSort[col] == null) rseSort[col] = rev; if (col == Column) rseSort[col] = !rseSort[col]; Column = col; var oldDsply = lay; lay = "none"; var tmpEl; var i, j; var minVal, minIdx; var testVal; var cmp; for (i = 0; i < th - 1; i++) { minIdx = i; minVal = getTextValue([i]s[col]); for (j = i + 1; j < th; j++) { testVal = getTextValue([j]s[col]); cmp = compareValues(minVal, testVal); if (rseSort[col]) cmp = -cmp; if (cmp == 0 && col != 1) cmp = compareValues(getTextValue([minIdx]s[1]), getTextValue([j]s[1])); if (cmp >0) { minIdx = j; minVal = testVal; } } if (minIdx > i) { tmpEl = veChild([minIdx]); re(tmpEl, [i]); } } makePretty(tblEl, col); setRanks(tblEl, col, rev); lay = oldDsply; return false;}if (ENT_NODE == null) { ENT_NODE = 1; _NODE = 3;}function getTextValue(el) { var i; var s; s = ""; for (i = 0; i < th; i++) if (dNodes[i]Type == _NODE) s += dNodes[i]Value; else if (dNodes[i]Type == ENT_NODE && dNodes[i]ame == "BR") s += " "; else // Use recursion to get text within sub-elements. s += getTextValue(dNodes[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("ss+", "g");function normalizeString(s) { s = ace(whtSpMult, " "); // Collapse any multiple whites space. s = ace(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 < th; i++) { rowEl = [i]; sName = ace(rowTest, ""); if (i % 2 != 0) sName += " " + rowClsNm; sName = normalizeString(sName); for (j = 2; j < [i]th; j++) { cellEl = s[j]; sName = ace(colTest, ""); if (j == col) sName += " " + colClsNm; sName = normalizeString(sName); } } var el = d; rowEl = [th - 1]; for (i = 2; i < th; i++) { cellEl = s[i]; sName = ace(colTest, ""); if (i == col) sName += " " + colClsNm; sName = normalizeString(sName); }}function setRanks(tblEl, col, rev) { var i = 0; var incr = 1; if (rseSort[col]) rev = !rev; if (rev) { incr = -1; i = th - 1; } var count = 1; var rank = count; var curVal; var lastVal = null; while (col > 1 && i >= 0 && i < th) { curVal = getTextValue([i]s[col]); if (lastVal != null && compareValues(curVal, lastVal) != 0) rank = count; [i] = rank; lastVal = curVal; count++; i += incr; } var rowEl, cellEl; var lastRank = 0; for (i = 0; i < th; i++) { rowEl = [i]; cellEl = s[0]; while (Child != null) veChild(Child); if (col > 1 && != lastRank) { ndChild(teTextNode()); lastRank = ; } }}
