当前位置:首页 > 日记 > 正文

Javascript实现表单击排序的方式

Javascript实现表单击排序的方式
本文的示例说明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程序设计有所帮助。

相关文章

鼓励你的经典签名签署经典签名

鼓励你的经典签名签署经典签名

经典,电脑软件,以下是鼓励你自己的经典人格签名的全部内容。如果您喜欢小编辑器的建议,请继续关注它。 你的未来一定是美好的。 像野鸡一样硬。 要么爬上去,要么生活在社会的底层。 让我们继续我们的梦想,迎接挑战。 用能堵住所有人嘴的能力。…

用于确定数组是否包含指定元素的Ja

用于确定数组是否包含指定元素的Ja

元素,数组,用于,电脑软件,Javascript,本文演示了Javascript如何确定数组是否包含指定的元素: 这段代码通过原型定义了一个数组方法,以便可以在任意数组中调用包含方法。 *数组. {方法名}允许您定义/覆盖对象方法 *针是你正在寻找的物品。 *这是一…

超级幽默和有趣的个性签名

超级幽默和有趣的个性签名

个性签名,有趣,幽默,电脑软件,放弃对待生活的打击! 别人留刘海是为了掩饰丑,他怕帅太高。 卢汉,我变成了世勋和你。 Sehun,我用卢汉的立方体和你。 父母忽悠孩子叫教育,孩子忽悠父母叫欺骗,互相忽悠叫代沟。 去吃饭吧,再见!你的朋友,好姐妹!再见!Good…

在路径工具中计算属性技能的实用技

在路径工具中计算属性技能的实用技

属性,计算,工具,路径,实用技术,本教程介绍了所有的路径工具,如钢笔、椭圆工具、矩形工具以及许多其他的路径叠加技术,只要我们预先设置路径的叠加,我们就能很快地绘制出更复杂的图形效果。 图1是熊头的一部分。图1的左边是参与操作的路径。图1…

Javascript实现圆在给定半径范围内的面积

Javascript实现圆在给定半径范围内的面积

范围内,半径,面积,电脑软件,Javascript,代码很简单,这里没有更多的浪费,朋友自己参考一下。 无功circularityarea =新功能(R 无功rcircle = 2; / /给定的圆的半径。 VaR的面积= circularityarea(rcircle); 警报(半径2的圆圈区域为:+区域); 以上是本文…

ps合成女孩穿越时空隧道特效

ps合成女孩穿越时空隧道特效

隧道,特效,时空,女孩,电脑软件,本教程是一个特殊的过程,教你使用PS让女孩穿越时空隧道。效果很美很漂亮。方法也不是很难。推荐朋友,喜欢同学们一起学走。 本教程介绍如何使用PS合成的女朋友通过时间隧道效应,这样的教程,其实很多,但萧边这个教…

PS合成幻影教程白色衣服

PS合成幻影教程白色衣服

幻影,教程,白色,衣服,电脑软件,本文主要介绍了ps合成白色恐怖鬼的步骤。 效果图很精致,主题很突出,作者想表现出一个可怕的数字。因此,所选的材料是非常古老和神秘的,和字符处理一些特殊的处理,渲染整个颜色变暗。恐怖的气氛很好。 最终效果 1。…

一个在localStorage在HTML5的使用

一个在localStorage在HTML5的使用

使用教程,电脑软件,localStorage,本文主要介绍了使用localStorage HTML5教程,和localStorage用于局部相互作用之间的浏览器和系统的相互作用。 本地存储的是什么 几天前,在旧项目中找到cookie操作是很奇怪的。经过协商,有必要缓存一些信息以…

Photoshopfashiondesignairbagpost

Photoshopfashiondesignairbagpost

电脑软件,Photoshopfashiondesignairbagpostertutorial,本教程是用PS图象处理软件的天猫品牌海报设计时尚大气,主要分析了全屏海报的设计理念,感兴趣的朋友一起学习。 本教程是用PS图象处理软件的天猫品牌海报设计教程步骤时尚大气的不是很…

Word如何使用技能设置水平页词

Word如何使用技能设置水平页词

设置,如何使用,技能,电脑软件,Word,小时候打开word文档,如果有一个以上的页面会显示第二页的水平方向,看起来很不舒服,因为页面的默认方向是垂直的,所以我们设置水平页,这里教你如何设置word水平页,到实际上超级简单。 1。文件页设置。 2。将垂直…

在ps中创建抽象文本效果的方法

在ps中创建抽象文本效果的方法

抽象,方法,文本,效果,电脑软件,使用PS图象处理软件创造一个耀眼的光有趣的文本层次的效果。这是一个从初级到中级教程。现在试试看。 In this tutorial, I will introduce the dazzling light in the Photoshop to create an interesting h…

QQ空间个人卡为什么不显示最新的日

QQ空间个人卡为什么不显示最新的日

日志,空间,显示,常见问题,最新,情况可能是由以下原因引起的: 1。如果在QQ空间设置了访问权限,日志更新不会显示在QQ空间的个人卡上; 2。更新后的日志设置了访问权限,建议将更新后的日志权限打开给所有人。 3、登录空间设置、其他设置不检查Q…