JavaScript实现表格点击排序的方法
本文实例讲述了JavaScript实现表格点击排序的方法。分享给大家供大家参考。具体分析如下：
这里实现基于JS的表格点击排序效果，可以根据表格内的数据大小自动按顺序排列，股票网站常会见到这种功能。
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8">
<title>表格排序</title>
</head>
<STYLEtype=text/css>TABLE{
BORDER-RIGHT:#0000002pxsolid;BORDER-TOP:#0000002pxsolid;
BORDER-LEFT:#0000002pxsolid;BORDER-BOTTOM:#0000002pxsolid;
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
}
THA{
COLOR:#000080;TEXT-DECORATION:none
}
THA:visited{
COLOR:#000080
}
THA:active{
COLOR:#800000;TEXT-DECORATION:underline
}
THA:hover{
COLOR:#800000;TEXT-DECORATION:underline
}
TR.alternateRow{
BACKGROUND-COLOR:#e0e0e0
}
TD.sortedColumn{
BACKGROUND-COLOR:#f0f0f0
}
TH.sortedColumn{
BACKGROUND-COLOR:#b0b0b0
}
TR.alternateRowTD.sortedColumn{
BACKGROUND-COLOR:#d0d0d0
}
</STYLE>
<SCRIPTtype=text/javascript>
functionsortTable(id,col,rev){
vartblEl=document.getElementById(id);
if(tblEl.reverseSort==null){
tblEl.reverseSort=newArray();
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;
varoldDsply=tblEl.style.display;
tblEl.style.display="none";
vartmpEl;
vari,j;
varminVal,minIdx;
vartestVal;
varcmp;
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;
returnfalse;
}
if(document.ELEMENT_NODE==null){
document.ELEMENT_NODE=1;
document.TEXT_NODE=3;
}
functiongetTextValue(el){
vari;
vars;
s="";
for(i=0;i<el.childNodes.length;i++)
if(el.childNodes[i].nodeType==document.TEXT_NODE)
s+=el.childNodes[i].nodeValue;
elseif(el.childNodes[i].nodeType==document.ELEMENT_NODE&&
el.childNodes[i].tagName=="BR")
s+="";
else
//Userecursiontogettextwithinsub-elements.
s+=getTextValue(el.childNodes[i]);
returnnormalizeString(s);
}
functioncompareValues(v1,v2){
varf1,f2;
f1=parseFloat(v1);
f2=parseFloat(v2);
if(!isNaN(f1)&&!isNaN(f2)){
v1=f1;
v2=f2;
}
//Comparethetwovalues.
if(v1==v2)
return0;
if(v1>v2)
return1
return-1;
}
varwhtSpEnds=newRegExp("^\\s*|\\s*$","g");
varwhtSpMult=newRegExp("\\s\\s+","g");
functionnormalizeString(s){
s=s.replace(whtSpMult,"");//Collapseanymultiplewhitesspace.
s=s.replace(whtSpEnds,"");//Removeleadingortrailingwhitespace.
returns;
}
varrowClsNm="alternateRow";
varcolClsNm="sortedColumn";
varrowTest=newRegExp(rowClsNm,"gi");
varcolTest=newRegExp(colClsNm,"gi");
functionmakePretty(tblEl,col){
vari,j;
varrowEl,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);
}
}
varel=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);
}
}
functionsetRanks(tblEl,col,rev){
vari=0;
varincr=1;
if(tblEl.reverseSort[col])
rev=!rev;
if(rev){
incr=-1;
i=tblEl.rows.length-1;
}
varcount=1;
varrank=count;
varcurVal;
varlastVal=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;
}
varrowEl,cellEl;
varlastRank=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>
<!--Offensivestatisticstable.-->
<TABLEcellSpacing=0cellPadding=0border=0>
<THEAD>
<TR>
<THclass=mainHeadercolSpan=11>NFL2001OffensiveStats</TH></TR>
<TR>
<THstyle="TEXT-ALIGN:left">Rank</TH>
<THstyle="TEXT-ALIGN:left"><Atitle="TeamName"
onclick="this.blur();returnsortTable('offTblBdy',1,false);"
href="#">Team</A></TH>
<TH><SPANtitle="GamesPlayed">Gms</SPAN></TH>
<TH><Atitle="TotalYards"
onclick="this.blur();returnsortTable('offTblBdy',3,true);"
href="#">Yds</A></TH>
<TH><Atitle="YardsPerGame"
onclick="this.blur();returnsortTable('offTblBdy',4,true);"
href="#">Yds/G</A></TH>
<TH><Atitle="TotalRushingYards"
onclick="this.blur();returnsortTable('offTblBdy',5,true);"
href="#">RuYds</A></TH>
<TH><Atitle="RushingYardsPerGame"
onclick="this.blur();returnsortTable('offTblBdy',6,true);"
href="#">RuYds/G</A></TH>
<TH><Atitle="TotalPassingYards"
onclick="this.blur();returnsortTable('offTblBdy',7,true);"
href="#">PaYds</A></TH>
<TH><Atitle="PassingYardsPerGame"
onclick="this.blur();returnsortTable('offTblBdy',8,true);"
href="#">PaYds/G</A></TH>
<TH><Atitle="TotalPointsScored"
onclick="this.blur();returnsortTable('offTblBdy',9,true);"
href="#">Pts</A></TH>
<TH><Atitle="PointsPerGame"
onclick="this.blur();returnsortTable('offTblBdy',10,true);"
href="#">Pts/G</A></TH></TR></THEAD>
<TBODYid=offTblBdy>
<TR>
<TDclass=numeric></TD>
<TD>Arizona</TD>
<TDclass=numeric>16</TD>
<TDclass=numeric>4898</TD>
<TDclass=numeric>306.1</TD>
<TDclass=numeric>1449</TD>
<TDclass=numeric>90.6</TD>
<TDclass=numeric>3449</TD>
<TDclass=numeric>215.6</TD>
<TDclass=numeric>295</TD>
<TDclass=numeric>18.4</TD></TR>
<TRclass=alternateRow>
<TDclass=numeric></TD>
<TD>Atlanta</TD>
<TDclass=numeric>16</TD>
<TDclass=numeric>5070</TD>
<TDclass=numeric>316.9</TD>
<TDclass=numeric>1773</TD>
<TDclass=numeric>110.8</TD>
<TDclass=numeric>3297</TD>
<TDclass=numeric>206.1</TD>
<TDclass=numeric>291</TD>
<TDclass=numeric>18.2</TD></TR>
<TR>
<TDclass=numeric></TD>
<TD>Detroit</TD>
<TDclass=numeric>16</TD>
<TDclass=numeric>4994</TD>
<TDclass=numeric>312.1</TD>
<TDclass=numeric>1398</TD>
<TDclass=numeric>87.4</TD>
<TDclass=numeric>3596</TD>
<TDclass=numeric>224.8</TD>
<TDclass=numeric>270</TD>
<TDclass=numeric>16.9</TD></TR>
<TRclass=alternateRow>
<TDclass=numeric></TD>
<TD>Jacksonville</TD>
<TDclass=numeric>16</TD>
<TDclass=numeric>4840</TD>
<TDclass=numeric>302.5</TD>
<TDclass=numeric>1600</TD>
<TDclass=numeric>100.0</TD>
<TDclass=numeric>3240</TD>
<TDclass=numeric>202.5</TD>
<TDclass=numeric>294</TD>
<TDclass=numeric>18.4</TD></TR>
<TR>
<TDclass=numeric></TD>
<TD>KansasCity</TD>
<TDclass=numeric>16</TD>
<TDclass=numeric>5673</TD>
<TDclass=numeric>354.6</TD>
<TDclass=numeric>2008</TD>
<TDclass=numeric>125.5</TD>
<TDclass=numeric>3665</TD>
<TDclass=numeric>229.1</TD>
<TDclass=numeric>320</TD>
<TDclass=numeric>20.0</TD></TR>
<TRclass=alternateRow>
<TDclass=numeric></TD>
<TD>Miami</TD>
<TDclass=numeric>16</TD>
<TDclass=numeric>4821</TD>
<TDclass=numeric>301.3</TD>
<TDclass=numeric>1664</TD>
<TDclass=numeric>104.0</TD>
<TDclass=numeric>3157</TD>
<TDclass=numeric>197.3</TD>
<TDclass=numeric>344</TD>
<TDclass=numeric>21.5</TD></TR>
<TR>
<TDclass=numeric></TD>
<TD>Minnesota</TD>
<TDclass=numeric>16</TD>
<TDclass=numeric>5006</TD>
<TDclass=numeric>333.7</TD>
<TDclass=numeric>1523</TD>
<TDclass=numeric>101.5</TD>
<TDclass=numeric>3483</TD>
<TDclass=numeric>232.2</TD>
<TDclass=numeric>287</TD>
<TDclass=numeric>19.1</TD></TR>
<TRclass=alternateRow>
<TDclass=numeric></TD>
<TD>NewEngland</TD>
<TDclass=numeric>16</TD>
<TDclass=numeric>4882</TD>
<TDclass=numeric>305.1</TD>
<TDclass=numeric>1793</TD>
<TDclass=numeric>112.1</TD>
<TDclass=numeric>3089</TD>
<TDclass=numeric>193.1</TD>
<TDclass=numeric>371</TD>
<TDclass=numeric>23.2</TD></TR>
<TR>
<TDclass=numeric></TD>
<TD>NewOrleans</TD>
<TDclass=numeric>16</TD>
<TDclass=numeric>5226</TD>
<TDclass=numeric>326.6</TD>
<TDclass=numeric>1712</TD>
<TDclass=numeric>107.0</TD>
<TDclass=numeric>3514</TD>
<TDclass=numeric>219.6</TD>
<TDclass=numeric>333</TD>
<TDclass=numeric>20.8</TD></TR>
<TRclass=alternateRow>
<TDclass=numeric></TD>
<TD>NewYorkGiants</TD>
<TDclass=numeric>16</TD>
<TDclass=numeric>5335</TD>
<TDclass=numeric>333.4</TD>
<TDclass=numeric>1777</TD>
<TDclass=numeric>111.1</TD>
<TDclass=numeric>3558</TD>
<TDclass=numeric>222.4</TD>
<TDclass=numeric>294</TD>
<TDclass=numeric>18.4</TD></TR>
</TBODY></TABLE>
</BODY>
</HTML>
希望本文所述对大家的javascript程序设计有所帮助。