HTML中数字降序排列怎么做,javascript实现表格升序降序排列(示例代码)

TableSorter

body{font-size:12px;line-height:25px;}tr{height:25px;}th{font-size:14px;border-bottom:solid 1px #DDDDDD;background-color:#EEEEEE;border:solid 1px;}td{font-size:12px;text-align:center;border:solid 1px;}

name

muscle

smart

city

Andrew1724武汉Jack1329北京Zack74上海Bill3734天津

varSortcol=-1;varSort_flg=[true,true,true,true];functiontablesort(tableid,colidx){vartable=document.getElementById(tableid);vartable_tbody=table.getElementsByTagName("tbody")[0];vartable_tr=table_tbody.getElementsByTagName("tr");//取得表格的数据行数

//把表格的各行数据存入临时数组，并进行排序

Sortcol=colidx;vartmp_tr_array=newArray();for(varcnt=0;cnt

tmp_tr_array.push(table_tr[cnt]);

}

tmp_tr_array.sort(sortfunc);//生成一个排好序的文档碎片

varfragment=document.createDocumentFragment();for(varcnt=0;cnt

fragment.appendChild(tmp_tr_array[cnt]);//该方法调用后，页面上的原表格中的此行将消失不见

}//至此，页面上的原表格只剩下表头

//把排好序的文档碎片接入原表格，排序完毕

table_tbody.appendChild(fragment);//点击后给表头添加排序的箭头

setCSSforTH(colidx);

}functionsetCSSforTH(colidx){//clear all th style

for(varcnt=0;cnt<4;cnt++){

document.getElementById("th"+cnt).style= "";

}//add style for clicking th

if(Sort_flg[colidx]){

Sort_flg[colidx]=false;

document.getElementById("th"+colidx).style= "background-image:url(http://images.cnblogs.com/cnblogs_com/cloudgamer/169629/r_2.jpg);background-repeat:no-repeat;background-position:right center;";

}else{

Sort_flg[colidx]=true;

document.getElementById("th"+colidx).style= "background-image:url(http://images.cnblogs.com/cnblogs_com/cloudgamer/169629/r_1.jpg);background-repeat:no-repeat;background-position:right center;";

}

}functionsortfunc(a,b){varvalue1=a.getElementsByTagName("td")[Sortcol].innerHTML;varvalue2=b.getElementsByTagName("td")[Sortcol].innerHTML;if(Sort_flg[Sortcol]){//升序排列

if(isNaN(value1)){returnvalue1.localeCompare(value2);//字符串比较

}else{returnNumber(value1)-Number(value2);//数值比较

}

}else{//降序排列

if(isNaN(value1)){returnvalue2.localeCompare(value1);

}else{returnNumber(value2)-Number(value1);

}

}

}