| 标题 | 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内容进行排序, |
| 随便看 |
|
在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。