Javascript实现表单击排序的方式
在这里,基于js的表单击排序效果可以根据表中数据的大小自动排列,这在股票网站中经常出现。
表格排序
{表
border-right:# 000000 2px固体硬盘市场关注调查:# 000000 2px固体;
border-left:# 000000 2px固体border-bottom:# 000000 2px固体;
边框间距:0px;单元格间距:0px
}
{ TD
padding-right:0.5em;padding-left:0.5em;FONT-SIZE: 10pt;
padding-bottom:2px;padding-top:2px;
束Arial,Helvetica,sans-serif;white-space:nowrap
}
{日
padding-right:0.5em;padding-left:0.5em;FONT-SIZE: 10pt;
padding-bottom:2px;padding-top:2px;
束Arial,Helvetica,sans-serif;white-space:nowrap
}
{ td.numeric
text-align:右
}
{日
background-color:# c0c0c0
}
{ th.mainheader
颜色:# ffffff;background-color:# 808080;text-align:左
}
{一日
颜色:# 000080;text-decoration:无
}
答:访问
颜色:# 000080
}
活动的
颜色:# 800000;text-decoration:下划线
}
答:盘旋
颜色:# 800000;text-decoration:下划线
}
{ tr.alternaterow
background-color:# e0e0e0
}
{ td.sortedcolumn
background-color:# f0f0f0
}
{ th.sortedcolumn
background-color:# b0b0b0
}
tr.alternaterow { td.sortedcolumn
background-color:# d0d0d0
}
功能sorttable(ID,COL,REV){
无功tblel = document.getelementbyid(ID);
如果(tblel.reversesort = = null){
tblel.reversesort =新的数组();
tblel.lastcolumn = 1;
}
如果(tblel。reversesort {西} = null)
TblEl。reversesort {西} =启;
如果(Col = tblel。lastcolumn)
TblEl。reversesort Col } = {!TblEl。reversesort {西};
tblel.lastcolumn = Col;
无功olddsply = tblel.style.display;
tblel.style.display =没有;
无功tmpel;
变量I,j;
VaR minVal,MiniDX;
无功testval;
VaR CMP;
为(i = 0;i < tblel.rows.length - 1;i++){
MiniDX =我;
gettextvalue minVal =(tblel。行{我} { }。细胞型);
为(j = i + 1;J < tblel.rows.length;j++){
testval = gettextvalue(tblel。行{ } { } J。细胞型);
CMP = comparevalues(minVal,testval);
如果(tblel。reversesort {西})
CMP抛光= -;
如果(CMP = 0 = 1!)
CMP = comparevalues(gettextvalue(tblel。行{ MiniDX }。细胞{ 1 }),
gettextvalue(tblel。行{ J }。细胞{ 1 }));
如果(CMP > 0){
MiniDX = J;
testval minVal =;
}
}
如果(MiniDX >我){
tmpel = tblel.removechild(tblel。行{ MiniDX });
tblel.insertbefore(tmpel,tblel。行{我});
}
}
MakePretty(tblel,Col);
SetRanks(tblel,COL,REV);
tblel.style.display = olddsply;
返回false;
}
如果(document.element_node = = null){
document.element_node = 1;
document.text_node = 3;
}
功能gettextvalue(EL){
var i;
VaR的;
s;
为(i = 0;i < el.childnodes.length;i++)
如果(EL。子{我}。节点类型=文件。text_node)
S = {我}电子节点;
如果(EL。子{我}。document.element_node节点类型= =
埃尔。子{我}。tagname = =BR)
=;
其他的
使用递归来获取子元素中的文本。
S = gettextvalue(EL。子{我});
返回normalizestring(S);
}
功能comparevalues(V1,V2){
变量f1;
F1 = parseFloat(V1);
F2 = parseFloat(V2);
如果(!IsNaN(F1)!IsNaN(F2)){
f1;
V2 = F2;
}
两个值。比较
如果(V1 = V2)
返回0;
如果(V2)
返回1
返回- 1;
}
无功whtspends = new RegExp(^ * | * $
无功whtspmult = new RegExp(的 +
功能normalizestring(s){
S =更换(whtspmult / /崩溃);任何多白人空间。
S =更换(whtspends ); / /删除前导或尾随空格。
返回的;
}
无功rowclsnm =alternaterow ;
无功colclsnm =sortedcolumn ;
无功rowtest = new RegExp(rowclsnm,GI);
无功coltest = new RegExp(colclsnm,GI);
功能makepretty(tblel,COL){
变量I,j;
VaR的小齿轮,cellel;
为(i = 0;i < tblel.rows.length;i++){
RowEl = tblEl.rows{i};
rowel.classname = rowel.classname.replace(rowtest,);
如果(i % 2)!= 0)
rowel.classname =+ rowclsnm ;
rowel.classname = normalizestring(小齿轮。类名);
为(J = 2;J < tblel。行{我}。cells.length;j++){
cellel =小齿轮。细胞{,};
cellel.classname = cellel.classname.replace(coltest,);
如果(j = j)
cellel.classname =+ colclsnm ;
cellel.classname = normalizestring(cellel。类名);
}
}
var el = tblel.parentnode.thead;
小齿轮= EL。行{ 1 } el.rows.length;
为(i = 2;i < rowel.cells.length;i++){
cellel =小齿轮。细胞{我};
cellel.classname = cellel.classname.replace(coltest,);
如果(i =)
cellel.classname =+ colclsnm ;
cellel.classname = normalizestring(cellel。类名);
}
}
功能setranks(tblel,COL,REV){
var I=0;
var增加= 1;
如果(tblel。reversesort {西})
Rev =!Rev;
如果(启){
增加= 1;
我= tblel.rows.length - 1;
}
VaR数= 1;
var =计数;
无功curval;
无功lastval = null;
而(Col > 1我< tblel.rows.length > = 0){
curval = gettextvalue(tblel。行{我} { }。细胞型);
如果(lastval!= null comparevalues(curval,lastval)!= 0)
秩=计数;
TblEl。行{我}等级=等级;
lastval = curval;
计数+;
我=增加;
}
VaR的小齿轮,cellel;
无功lastrank = 0;
为(i = 0;i < tblel.rows.length;i++){
小齿轮= tblel行{我};
cellel =小齿轮。细胞{ 0 };
而(cellel.lastchild!= null)
cellel.removechild(cellel。lastchild);
如果(Col > 1 rowel.rank!= lastrank){
cellel.appendchild(document.createtextnode(小齿轮。等级));
lastrank = rowel.rank;
}
}
}
NFL 2001进攻统计
秩
<名称团队名称
onclick=this.blur();返回sorttable('offtblbdy ',1,false);
href =#>团队
大湄公河次区域
<标题总码
onclick=this.blur();返回sorttable('offtblbdy ',3,true);
href =#>码
<游戏名称每码
onclick=this.blur();返回sorttable('offtblbdy ',4,true);
href =#>码/ g
<标题总冲码
onclick=this.blur();返回sorttable('offtblbdy ',5,true);
href =#> ruyds
<标题
onclick=this.blur();返回sorttable('offtblbdy ',6,true);
href =#> ruyds /克
<标题总通行码
onclick=this.blur();返回sorttable('offtblbdy ',7,true);
href =#> PaYds
<一个标题每游戏通过码
onclick=this.blur();返回sorttable('offtblbdy ',8,true);
href =#> payds /克
<标题总得分
onclick=this.blur();返回sorttable('offtblbdy ',9,true);
href =#> PTS
<每个游戏点
onclick=this.blur();返回sorttable('offtblbdy ',10,true);
href =#>分/克
亚利桑那州
十六
四千八百九十八
三百零六点一
一千四百四十九
九十点六
三千四百四十九
二百一十五点六
二百九十五
十八点四
亚特兰大
十六
五千零七十
三百一十六点九
一千七百七十三
一百一十点八
三千二百九十七
二百零六点一
二百九十一
十八点二
底特律
十六
四千九百九十四
三百一十二点一
一千三百九十八
八十七点四
三千五百九十六
二百二十四点八
二百七十
十六点九
杰克逊维尔
十六
四千八百四十
三百零二点五
一千六百
一百
三千二百四十
二百零二点五
二百九十四
十八点四
堪萨斯市
十六
五千六百七十三
三百五十四点六
二千零八
一百二十五点五
三千六百六十五
二百二十九点一
三百二十
二十
迈阿密
十六
四千八百二十一
三百零一点三
一千六百六十四
一百零四
三千一百五十七
一百九十七点三
三百四十四
二十一点五
明尼苏达
十六
五千零六
三百三十三点七
一千五百二十三
一百零一点五
三千四百八十三
二百三十二点二
二百八十七
十九点一
新英格兰
十六
四千八百八十二
三百零五点一
一千七百九十三
一百一十二点一
三千零八十九
一百九十三点一
三百七十一
二十三点两
新奥尔良
十六
五千二百二十六
三百二十六点六
一千七百一十二
一百零七
三千五百一十四
二百一十九点六
三百三十三
二十点八
纽约巨人队
十六
五千三百三十五
三百三十三点四
一千七百七十七
一百一十一点一
三千五百五十八
二百二十二点四
二百九十四
十八点四
希望本文能对大家的javascript程序设计有所帮助。