通过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 {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 { otemp.appendChild(aTRs[i]);//分别将每行加入到文档碎片中 } oTbody.appendChild(otemp);//将文档碎片添加到文档中 oTable.nowlie = TRi;//设置nowlie属性 } --> 接下来是页面代码
在这里插入代码
| 字符排序 | 数字排序 | 小树排序 | 日期排序 |
|---|---|---|---|
| w | 1 | 1.01 | 6/9/1999 |
| w | 3 | 3.25 | 12/25/2010 |
| w | 2 | 2.18 | 10/9/2008 |
| f | 36 | 2.99 | 9/12/1985 |
| a | 65 | 3.12 | 3/9/2010 |
| s | 22 | 10.3 | 4/2/2009 |
| p | 12 | 4.5 | 9/17/2011 |
| dian | 31 | 2.33 | 3/3/2007 |
| c | 33 | 9.68 | 6/4/2010 |
| n | 21 | 5.69 | 9/17/2009 |
事业单位
当前位置：
公考类
招聘类
各类考试
