<!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()
{
// /^2d{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>