日期:2014-05-16 浏览次数:20328 次
<!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>