PHP学习_PHP技术_PHP网站建设_PHP程序员专注于PHP技术研究及学习

Adophper » 前端设计 » js表格排序,jquery表格排序,表格排序

js表格排序,jquery表格排序,表格排序

此文被围观1671日期: 2012-07-16 分类 : 前端设计  标签:  ·······
js表格排序,jquery表格排序,表格排序 市面上有很多关于表格排序的文章,这里也是要网上找的,感觉还不错,但是也有不足,而且是致命的! 其中还是有很多知识,比如说:求表格行数和列数 还有sort这类函数,里面最难懂的有一个知识点prototype,后面就要调用这个 [html] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <HEAD> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>js表格排序,jquery表格排序,表格排序</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> </HEAD> <BODY> <table id="tab" border="1"> <tr> <th id="name" property="name" type="string" order="asc" onclick="sort('name');">姓名</th> <th id="age" property="age" type="number" order="asc" onclick="sort('age');">年龄</th> <th id="money" property="money" type="number" order="asc" onclick="sort('money');">价格</th> </tr> <tr> <td>bbb</td> <td>12</td> <td>120.00</td> </tr> <tr> <td>aaa</td> <td>15</td> <td>101.15</td> </tr> <tr> <td>ccc</td> <td>11</td> <td>1120.00</td> </tr> <tr> <td>aaa</td> <td>10</td> <td>140.00</td> </tr> <tr> <td>aaa</td> <td>11</td> <td>9.50</td> </tr> <tr> <td>aaa</td> <td>2</td> <td>103.00</td> </tr> <tr> <td>aaa</td> <td>14</td> <td>100.00</td> </tr> </table> <script type="text/javascript"> /*** * 2012-7-16 adophper.com * 注意var tab处有两个地方,如果只定义一处可能引起浏览器不兼容, * 还有不足就是没加一列都要去改js而不能直接调用 * @ e-mail: hello@adophper.com ***/ //定义类 function People(_name,_age,_money){ this.name=_name; this.age=_age; this.money=_money; if(typeof this.show !="function" ){ People.prototype.show=function(){ return this.name+","+this.age+','+this.money; } } } //初始化数组 function initArr(){ var peoples=new Array(); //表格的id var tab=document.getElementById("tab"); var rows = tab.rows.length; var cells = tab.rows.item(0).cells.length; for(var i=1;i<rows;i++){ var p = new People(tab.rows[i].cells[0].innerHTML,tab.rows[i].cells[1].innerHTML,tab.rows[i].cells[2].innerHTML); peoples.push(p); } return peoples; } var peoples=initArr(); //排序方法 function mysort(flag){ peoples.sort(function(a,b){ return compare(a,b,flag); }); } //比较方法 function compare(a,b,flag){ var findex=flag[0]; if(typeof findex != "undefined"){ var af=a[findex.property]; var bf=b[findex.property]; if(findex.order=="desc"){ if(com(af,bf,findex.type)){ return -1; }else if(af==bf){ return compare(a,b,flag.slice(1,flag.length)); }else { return 1; } }else if(findex.order=="asc"){ if(com(bf,af,findex.type)){ return -1; }else if(af==bf){ return compare(a,b,flag.slice(1,flag.length)); }else { return 1; } } }else{ return -1; } } //不同类型的比较 function com(a,b,type){ if(type=="string"){ return a>b; }else if(type=="number"){ return new Number(a)>new Number(b); } } //触发排序 function sort(id){ var str=""; var ss=[]; var si= $("#"+id); si={property:si.attr("property"), type:si.attr("type"), order:si.attr("order")} ss.push(si); //要排序列的ID var by = $("#"+id).attr("order"); if(by == 'asc'){ $("#"+id).attr("order", "desc"); }else{ $("#"+id).attr("order", "asc"); } mysort(ss); var tab=document.getElementById("tab"); for(var i=1;i<tab.rows.length;i++){ tab.rows[i].cells[0].innerHTML=peoples[i-1].name; tab.rows[i].cells[1].innerHTML=peoples[i-1].age; tab.rows[i].cells[2].innerHTML=peoples[i-1].money; } //输出 //for(var p in peoples){ // str+=peoples[p].show()+"n"; //} //alert(str); } </script> </BODY> </HTML> [/html]

本站使用ThinkPHP框架开发读图网主题,目前托管在阿里云,图片由读图网提供. 蜀ICP备12031064号

Copyright © 2011-2017adophper.com All Rights Reserved.