表格排序
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <div> <table id="tab"> <thead> <tr> <th class="cursor">名字</th> <th class="cursor">年龄</th> <th class="cursor">武力</th> </tr> </thead> <tbody > </tbody> </table> </div> <script type="text/javascript"> var oTab = document.getElementById("tab"); var tBody = oTab.tBodies[0]; var xmlHttp = new XMLHttpRequest(); var data = null; xmlHttp.open('GET','./package.json',false); xmlHttp.onreadystatechange=function() { // /^2\d{2}$/.test(xhr.status) if (xmlHttp.readyState==4 && xmlHttp.status==200) { var jsonString = xmlHttp.responseText; // console.log(jsonString); data=JSON.parse(jsonString); } }; xmlHttp.send(null); var farg = document.createDocumentFragment(); function rendData(){ for(var i = 0; i<data.length;i++){ var cur = data[i]; var tr = document.createElement("tr"); for(var key in cur){ // console.log("key "+key,data[i][key]); var td = document.createElement("td"); //td.setAttribute("value",data[i][key]); td.innerHTML =data[i][key]; tr.appendChild(td); } farg.appendChild(tr); } tBody.appendChild(farg); } rendData(); var oRows = tBody.rows; Array.apply(null,oRows); function sort(n){ var that = this; this.flag*=-1; var newArray = [].slice.call(oRows); newArray.sort(function(a,b){ var itemA = a.cells[n].innerHTML; var itemB = b.cells[n].innerHTML; if(isNaN(itemA)||isNaN(itemB)){ return itemA.localeCompare(itemB)*(that.flag); }else{ return (parseFloat(itemA)-parseFloat(itemB))*(that.flag); } return ; }); var frag = document.createDocumentFragment(); for(var x =0;x<newArray.length;x++){ frag.appendChild(newArray[x]); } tBody.appendChild(frag); console.log(newArray); } var curs = document.getElementsByClassName("cursor"); for(var v = 0;v <curs.length;v++){ curs[v].flag = -1; curs[v].index = v; curs[v].onclick =function (){ var that = this; sort.call(that,that.index) } } </script> </body> </html>