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(/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(/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);
}
}
}
如果觉得《HTML中数字降序排列怎么做 javascript实现表格升序降序排列(示例代码)》对你有帮助，请点赞、收藏，并留下你的观点哦！
