js表格排序,jquery表格排序,表格排序
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]
川公网安备51162302000234