javascript实现多列table排序

JS脚本　2010/4/27 10:10:44　　点击：不统计

http://%77w%77%2E%66%6F%72%61%73%70%2E%63n网站制作学习

通过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内容进行排序,

http://%77%77%77%2E%66网站制作%6F学习网%72%61%73%70%2E%63%6E

·上一篇：javascript实现table列排序 >> 　　　·下一篇：javascript之拖放事件 >>