实例代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table id="table" border="1" cellspacing="0" cellpadding="0" width="500">
</table>
</body>
<script>
var datas=[
{name:'小红',age:12,num:25,score:123},
{name:'小民',age:11,num:24,score:123},
{name:'小陶',age:16,num:22,score:123},
{name:'小哎',age:11,num:26,score:123},
{name:'小帨',age:12,num:21,score:123},
{name:'小新',age:17,num:2,score:123},
{name:'小率',age:13,num:15,score:123},
{name:'小雄',age:12,num:12,score:123},
]
function TableSort(id,tdatas){
this.ctn = document.getElementById(id);
this.tdatas = tdatas;
}
TableSort.prototype.init=function(){
var thead = this.initTile();
var tbody = this.initThbodyData(this.tdatas);
this.ctn.appendChild(thead);
this.ctn.appendChild(tbody);
this.addEvent(this.tdatas);
}
TableSort.prototype.initTile=function(){
var theader = document.createElement('thead');
var tag = "<tr>"+
"<th type='name'>姓名</th>"+
"<th type='age'>年龄</th>"+
"<th type='num'>学号</th>"+
"<th type='score'>分数</th>"
+"</tr>"
theader.innerHTML=tag;
return theader;
}
TableSort.prototype.initThbodyData=function(tdatas){
var thbody = document.createElement('tbody');
var tags = [];
for(var i=0;i<tdatas.length;i++){
var tag = "<tr>"+
"<td>"+tdatas[i].name+"</td>"+
"<td>"+tdatas[i].age+"</td>"+
"<td>"+tdatas[i].num+"</td>"+
"<td>"+tdatas[i].score+"</td>"
+"</tr>"
tags.push(tag);
}
for(var i=0;i<tags.length;i++){
thbody.innerHTML+=tags[i];
}
return thbody;
}
TableSort.prototype.addEvent=function(tdatas){
var that = this;
var ths = document.getElementsByTagName('th');
for(var i=0;i<ths.length;i++){
ths[i].onclick=function(){
var sortName = this.getAttribute('type');
this.flag=this.flag==-1?1:-1;
var _this=this;
tdatas.sort(function(o1,o2){
var n1=o1[sortName];
var n2 =o2[sortName];
if(n1>n2){
return _this.flag;
}else if(n1<n2){
return -_this.flag;
}else{
return 0;
}
});
var newTbody = that.initThbodyData(tdatas);
var oldTbody = document.getElementsByTagName('tbody')[0];
that.ctn.replaceChild(newTbody,oldTbody);
};
}
}
var ts = new TableSort('table',datas);
ts.init();
</script>
</html>