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

2015-05-12 10:02作者：zhao

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

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

<html>

<head>

</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>

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("ss+", "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>

<THEAD>

<TR>

<TH class=mainHeader colSpan=11>NFL 2001 Offensive Stats</TH></TR>

<TR>

<TH style="TEXT-ALIGN: left"><A title="Team Name"

onclick="this.blur(); return sortTable('offTblBdy', 1, false);"

href="#">Team</A></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>

<TR>

<TD>Arizona</TD>

<TD>Atlanta</TD>

<TR>

<TD>Detroit</TD>

<TD>Jacksonville</TD>

<TR>

<TD>Kansas City</TD>

<TD>Miami</TD>

<TR>

<TD>Minnesota</TD>

<TD>New England</TD>

<TR>

<TD>New Orleans</TD>

<TD>New York Giants</TD>

</TBODY></TABLE>

</BODY>

</HTML>

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