html页面点击表头排序,HTML中实现Table表头点击升序/降序排序

1 题目:如下图,请实现表格信息的排序功能,当点击表头的属性区域,将表格信息进行排序切换功能,即第一次点击为降序排序,再一次点击进行升序排序。2 姓名   力量 敏捷 智力3 德鲁伊王 17 24 134 月之骑士 15 22 165 众神之王 19 15 206 流浪剑客 23 15 147 基本思路:8 点击将各列数值存入数组第一次点击?(className=="as"?)升序排序(className="desc")按新排列的数组的顺序,将各列赋予新值降序排序(className="as")yesno9 完整代码:10

11

12

13

14

15

16

17

18

19

姓名

20 力量

21 敏捷

22 智力

23

24

25 德鲁伊

26 17

27 24

28 13

29

30

31 月之骑士

32 15

33 22

34 16

35

36

37 众神之王

38 19

39 15

40 20

41

42

43 流浪剑客

44 23

45 15

46 14

47

48

49

50

51

52 vartag=1;53 functionsortNumberAS(a, b)54 {55 returna-b56 }57 functionsortNumberDesc(a, b)58 {59 returnb-a60 }61

62 functionSortTable(obj){63 vartd0s=document.getElementsByName("td0");64 vartd1s=document.getElementsByName("td1");65 vartd2s=document.getElementsByName("td2");66 vartd3s=document.getElementsByName("td3");67 vartdArray0=[];68 vartdArray1=[];69 vartdArray2=[];70 vartdArray3=[];71 for(vari=0;i

94 obj.className="desc";95 }else{96 columnArray.sort(sortNumberDesc);//排序后的新值

97 obj.className="as";98 }99

100

101 for(vari=0;i

点击表头即可实现排序的代码./*table排序步骤 1、给排序的表格加id 2、标题栏加<thead> 3、排序的内容加<tbody> 5、引入此js 6、在文档的末尾加入 [removed] var to = new TableOrder("idTable"), odID = to.creat({ type: "int", desc: false }), arrOrder = []; $$A.forEach([ ["idNum", { type: "int" }],//排序对象(对应列的id) ["idTitle", { index: 1 }], ["idExt", { index: 1, property: "_ext" }], ["idAddtime", { index: 2, type: "date" }], ["idSize", { index: 3, property: "_order", type: "int" }], ["idCheckbox", { index: 4, type: "bool", value: SetCheck }], ["idRadio", { index: 5, type: "bool", value: SetCheck }] ], function (arr){ var o = $$(arr[0]), order = to.creat(arr[1]); order.onBegin = function(){ ClearCss(); odID.desc = this.desc; } order.onEnd = function(){ o.className = this.desc ? "desc" : "asc";//设置样式 this.desc = !this.desc;//取反排序 } o.onclick = function(){ to.sort(order, odID); } arrOrder.push(o);//记录排序项目(这里主要用来设置样式) }); [removed] 7、【排序对象】 属性 默认值//说明 index: 0,//td索引 property: "innerHTML",//获取数据的属性 type: "string",//比较的数据类型 desc: true,//是否按降序 compare: null,//自定义排序函数 value: null,//自定义取值函数 repair: this._repair,//是否解决checkbox和radio状态恢复bug onBegin: function(){},//排序前执行 onEnd: function(){}//排序后执行 */ //完整的示例 //<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> //<html> //<head> //<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> //<title>Table 排序</title> //[removed][removed] //</head> //<body> //<style type="text/css"> //.odTable {width:500px;border:1px solid #ebebeb;line-height:20px;font-size:12px;background:#FFF;} //.odTable thead {background-color:#ebebeb;} //.odTable span {color:#333;padding-right:15px;cursor:pointer;} //.odTable .desc, .odTable .asc {background:url(http://images.cnblogs.com/cnblogs_com/cloudgamer/169629/r_2.jpg) right center no-repeat;} //.odTable .desc {background-image:url(http://images.cnblogs.com/cnblogs_com/cloudgamer/169629/r_1.jpg);} //</style> //<table border="0" cellspacing="0" cellpadding="5" class="odTable" id="idTable"> // <thead> // <tr> // <td align="center"><span id="idNum">ID</span></td> // <td> <span id="idTitle">名称</span> / <span id="idExt">类型</span></td> // <td width="100" align="center"><span id="idAddtime">上传时间</span></td> // <td width="50" align="center"><span id="idSize">大小</span></td> // <td width="30" align="center"><span id="idCheckbox">C</span></td> // <td width="30" align="center"><span id="idRadio">R</span></td> // </tr> // </thead> // <tbody> // <tr> // <td align="center">1</td> // <td _ext="htm">new.htm</td> // <td align="center">2008/9/12</td> // <td align="right" _order="433244">423.09 K</td> // <td align="center"><input type="checkbox"/></td> // <td align="center"><input name="c" type="radio"/></td> // </tr> // <tr> // <td align="center">2</td> // <td _ext="js">Scroller.js</td> // <td align="center">2008/9/23</td> // <td align="right" _order="2560">2.5 K</td> // <td align="center"><input type="checkbox"/></td> // <td align="center"><input name="c" type="radio"/></td> // </tr> // <tr> // <td align="center">3</td> // <td _ext="js">AlertBox.js</td> // <td align="center">2008/9/23</td> // <td align="right" _order="3563">3.48 K</td> // <td align="center"><input type="checkbox"/></td> // <td align="center"><input name="c" type="radio"/></td> // </tr> // <tr> // <td align="center">4</td> // <td _ext="xml">1.xml</td> // <td align="center">2008/10/4</td> // <td align="right" _order="11397">11.13 K</td> // <td align="center"><input type="checkbox"/></td> // <td align="center"><input name="c" type="radio"/></td> // </tr> // <tr> // <td align="center">5</td> // <td _ext="xml">4.xml</td> // <td align="center">2008/10/4</td> // <td align="right" _order="108">108 b</td> // <td align="center"><input type="checkbox"/></td> // <td align="center"><input name="c" type="radio"/></td> // </tr> // <tr> // <td align="center">6</td> // <td _ext="htm">news.htm</td> // <td align="center">2008/10/4</td> // <td align="right" _order="14074">13.74 K</td> // <td align="center"><input type="checkbox"/></td> // <td align="center"><input name="c" type="radio"/></td> // </tr> // <tr> // <td align="center">7</td> // <td _ext="js">function.js</td> // <td align="center">2008/10/4</td> // <td align="right" _order="2844">2.78 K</td> // <td align="center"><input type="checkbox"/></td> // <td align="center"><input name="c" type="radio"/></td> // </tr> // <tr> // <td align="center">8</td> // <td _ext="mp3">神秘园 - Nocturne.mp3</td> // <td align="center">2008/9/20</td> // <td align="right" _order="3111293">2.97 M</td> // <td align="center"><input type="checkbox"/></td> // <td align="center"><input name="c" type="radio"/></td> // </tr> // <tr> // <td align="center">9</td> // <td _ext="doc">详细功略+剧情流程(一).doc</td> // <td align="center">2009/2/2</td> // <td align="right" _order="63488">62 K</td> // <td align="center"><input type="checkbox"/></td> // <td align="center"><input name="c" type="radio"/></td> // </tr> // <tr> // <td align="center">10</td> // <td _ext="doc">详细功略+剧情流程(二).doc</td> // <td align="center">2009/2/2</td> // <td align="right" _order="164352">160.5 K</td> // <td align="center"><input type="checkbox"/></td> // <td align="center"><input name="c" type="radio"/></td> // </tr> // </tbody> //</table> //<br /> //有中文的先排前面,再按时间倒序,ID倒序排序: //<input name="" type="button" value="Sort" id="idBtn" /> //[removed] //var to = new TableOrder("idTable"), odID = to.creat({ type: "int", desc: false }), arrOrder = []; //$$A.forEach([ // ["idNum", { type: "int" }], // ["idTitle", { index: 1 }], // ["idExt", { index: 1, property: "_ext" }], // ["idAddtime", { index: 2, type: "date" }], // ["idSize", { index: 3, property: "_order", type: "int" }], // ["idCheckbox", { index: 4, type: "bool", value: SetCheck }], // ["idRadio", { index: 5, type: "bool", value: SetCheck }] //], function (arr){ // var o = $$(arr[0]), order = to.creat(arr[1]); // order.onBegin = function(){ ClearCss(); odID.desc = this.desc; } // order.onEnd = function(){ // o.className = this.desc ? "desc" : "asc";//设置样式 // this.desc = !this.desc;//取反排序 // } // o.onclick = function(){ to.sort(order, odID); } // arrOrder.push(o);//记录排序项目(这里主要用来设置样式) //}); //$$("idNum").onclick(); //////////////////////////////////////////////////////////////////////// //var od1 = to.creat({ index: 1, onEnd: ClearCss, // compare: function(value1, value2) { // var re = /[\u4E00-\u9FA5]/, v1 = re.test(value1), v2 = re.test(value2); // return v1 == v2 ? 0 : (v1 ? 1 : -1); // } // }) // ,od2 = to.creat({ index: 2, type: "date" }) ,od3 = to.creat({ type: "int" }); //$$("idBtn").onclick = function(){ to.sort(od1, od2, od3); } //[removed] //</body> //</html>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值