javascript实现多列table排序
来源:易贤网 阅读:2228 次 日期:2014-08-15 17:03:04
温馨提示:易贤网小编为您整理了“javascript实现多列table排序”,方便广大网友查阅!

通过javascript的localeCompare来进行排序判断判断,这里举例是对1列的table进行排序.

查看效果:javascript实现table多列排序,列是不通的数据类型,通过转换后的数据类型再次排列

建立方法管理容器

var forasp = new Object;

首先看类型转换函数

forasp.conver =function(oValue,oDatetype)

{switch(oDatetype){

case "int":

return parseInt(oValue);

case "float":

return parseFloat(oValue);

case "date":

return new Date(Date.parse(oValue));

default:

return oValue.toString();

}

}

再看比较函数

forasp.bijiao = function(TRi,oDatetype)//在这里解释一下,TRi是第几列如果是第一列则为0,第二列则为1,返回的结果也是一个函数,因为在排序函数中sort()里面是一个函数.

{

return function compare(oTR1,oTR2)

{

var s1 = forasp.conver(oTR1.cells[TRi].firstChild.nodeValue,oDatetype);//通过TRi传过来列索引号的内容

var s2 = forasp.conver(oTR2.cells[TRi].firstChild.nodeValue,oDatetype);//并通过转换函数将列的值进行转换

if (s1<s2)//转为相同的数据类型后比较.

{return -1;}

else if(s1>s2)

{return 1;}

else

{return 0;}

}

}

调用比较函数

forasp.sortTable = function(id,TRi,oDatetype)

{

var oTable = document.getElementById(id);//获取以id为id的table对象---

var oTbody = oTable.tBodies[0];//获取第一个tBody

var oRows = oTbody.rows;//获取tBody的所有的行

var aTRs = new Array;//新建一个数组

for (var i=0;i < oRows.length ;i++ )

{

aTRs[i] = oRows[i];//循环将所有行换到新的数组

}

//在这里多一个功能就是翻转,当多次点击,都进行翻转即可,在这里给表的对象设置一个属性nowlie

if(oTable.nowlie!=TRi)//如果不是当前列

{

aTRs.sort(forasp.bijiao(TRi,oDatetype));//对数组进行比较,是通过新的数组的行比较===

}

else

{

aTRs.revers();

}

var otemp = document.createDocumentFragment();//创建文档碎片

for (var i = 0;i<aTRs.length ;i++ )

{

otemp.appendChild(aTRs[i]);//分别将每行加入到文档碎片中

}

oTbody.appendChild(otemp);//将文档碎片添加到文档中

oTable.nowlie = TRi;//设置nowlie属性

}

-->

接下来是页面代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE>javascript获取按键值-网站制作学习网</TITLE>

在这里插入代码

</HEAD>

<BODY>

<table id="forasp_cn" >

<thead>

<tr>

<th onclick = "forasp.sortTable('forasp_cn',0);">字符排序</th>

<th onclick = "forasp.sortTable('forasp_cn',1,'int');">数字排序</th>

<th onclick = "forasp.sortTable('forasp_cn',2,'float');">小树排序</th>

<th onclick = "forasp.sortTable('forasp_cn',3,'date');">日期排序</th>

</tr>

</thead>

<tbody>

<tr><td>w</td><td>1</td><td>1.01</td><td>6/9/1999</td></tr>

<tr><td>w</td><td>3</td><td>3.25</td><td>12/25/2010</td></tr>

<tr><td>w</td><td>2</td><td>2.18</td><td>10/9/2008</td></tr>

<tr><td>f</td><td>36</td><td>2.99</td><td>9/12/1985</td></tr>

<tr><td>a</td><td>65</td><td>3.12</td><td>3/9/2010</td></tr>

<tr><td>s</td><td>22</td><td>10.3</td><td>4/2/2009</td></tr>

<tr><td>p</td><td>12</td><td>4.5</td><td>9/17/2011</td></tr>

<tr><td>dian</td><td>31</td><td>2.33</td><td>3/3/2007</td></tr>

<tr><td>c</td><td>33</td><td>9.68</td><td>6/4/2010</td></tr>

<tr><td>n</td><td>21</td><td>5.69</td><td>9/17/2009</td></tr>

</tbody>

</BODY>

</HTML>

完毕,看看你懂了么,这是通过javascript的localepare对table内容进行排序,

更多信息请查看IT技术专栏

更多信息请查看脚本栏目
上一篇:window对象属性
易贤网手机网站地址:javascript实现多列table排序
由于各方面情况的不断调整与变化,易贤网提供的所有考试信息和咨询回复仅供参考,敬请考生以权威部门公布的正式信息和咨询为准!

2025国考·省考课程试听报名

  • 报班类型
  • 姓名
  • 手机号
  • 验证码
关于我们 | 联系我们 | 人才招聘 | 网站声明 | 网站帮助 | 非正式的简要咨询 | 简要咨询须知 | 加入群交流 | 手机站点 | 投诉建议
工业和信息化部备案号:滇ICP备2023014141号-1 云南省教育厅备案号:云教ICP备0901021 滇公网安备53010202001879号 人力资源服务许可证:(云)人服证字(2023)第0102001523号
云南网警备案专用图标
联系电话:0871-65099533/13759567129 获取招聘考试信息及咨询关注公众号:hfpxwx
咨询QQ:526150442(9:00—18:00)版权所有:易贤网
云南网警报警专用图标