<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="oDiv">
</div>
<a href="#" id="a">正序</a>
<a href="#" id="b">倒序</a>
<script type="text/javascript">
//结构数组
var arr= [
["张三","男",80],
["李四","男",85],
["王五","男",92],
["韩梅梅","女",100],
["李雷","男",77]
]
function tableSort(opts){
var self = this;
self.arr = opts.arr;
self.index = opts.index; //排序索引
};
tableSort.prototype = {
getSortArr : function(n){//返回排序后的数组
var self = this;
return self.arr.sort(function(a,b){
var index = self.index;
var aArr = null;
var bArr = null;
for (var i = 0,len = index.length;i<len;i++){
aArr = a[index.charAt(i)];
bArr = b[index.charAt(i)];
}
return (n=="asc")?aArr - bArr:bArr - aArr;
});
},
getHtml : function(arr){//自己拼接html
var self = this;
var arr = self.arr;
var html = '<table width="600" border="0" cellspacing="0" cellpadding="0">'+
' <tr>'+
' <td>姓名</td>'+
' <td>性别</td>'+
' <td>分数</td>'+
' </tr>'
for (var i = 0,len = arr.length;i<len;i++){
html += '<tr>'+
' <td>'+arr[i][0]+'</td>'+
' <td>'+arr[i][1]+'</td>'+
' <td>'+arr[i][2]+'</td>'+
'</tr>'
};
html += '</table>';
return html;
},
isArr : function(arr){//是否是数组-还没有用到
return Object.prototype.toString.call(arr) === '[object Array]';   
}
};  
var _ = new tableSort({
arr:arr,
index:"2"
});
document.getElementById("oDiv").innerHTML = _.getHtml(arr);document.getElementById("a").onclick = function(){//正序
document.getElementById("oDiv").innerHTML = _.getHtml(_.getSortArr("asc"))
};
document.getElementById("b").onclick = function(){//倒序
document.getElementById("oDiv").innerHTML = _.getHtml(_.getSortArr("desc"))
};
</script>
</body>
</html>