js学习总结----经典小案例之表格排序
具体代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{margin:0;padding:0;font-family:"微软雅黑";font-size:14px;-webkit-user-select:none;}
.box{
width:400px;
margin:20px auto;
padding:20px;
border:1px solid #008000;
border-radius:10px;
box-shadow: 3px 3px 10px 0 #dbeebd
}
.box thead{
background:#008000;
color:#fff;
}
.box thead tr{
height:35px;
}
.box thead th{
width:100px;
}
.box thead th.cursor{
cursor:pointer;
}
.box tbody tr{
height:30px;
}
.box tbody tr.bg{
background:lightgreen;
}
.box tbody td{
width:100px;
text-align:center;
}
</style>
</head>
<body>
<div class=box>
<table id='tab' cellspacing="0" cellpadding="0">
<thead>
<tr>
<th>姓名</th>
<th class='cursor'>年龄</th>
<th class='cursor'>武力</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr>
<td>令狐冲</td>
<td>25</td>
<td>99</td>
<td>男</td>
</tr>
<tr class='bg'>
<td>令狐冲</td>
<td>25</td>
<td>99</td>
<td>男</td>
</tr>
</tbody>
</table>
</div>
<script>
var oTab = document.getElementById('tab');
var tHead = oTab.tHead;//表格的独有属性
var oThs = tHead.rows[0].cells;//表格的独有属性
var tBody = oTab.tBodies[0];
var oRows = tBody.rows;
var data = null
//1、首先获取后台（data.txt）中的数据->"JSON格式的字符串"
//1)、首先创建一个Ajax对象
var xhr = new XMLHttpRequest;
//2)、打开我们需要请求数据的那个文件地址
xhr.open('get','data.txt',false);
//3)、监听请求的状态
xhr.onreadystatechange = function(){
if(xhr.readyState===4 && /^2\d{2}$/.test(xhr.status)){
var val = xhr.responseText;
data = utils.jsonParse(val);//前几节已经写好的方法
}
}
//4)、发送请求
xhr.send(null);
//2、实现数据绑定
function bind(){
var frg = document.createDocumentFragment();
for(var i = 0;i<data.length;i++){
var cur = data[i];
var oTr = document.createElement("tr");//每一次循环创建一个tr
//每一个tr中还需要创建四个TD，因为每一个对象中有四组键值对
for(var key in cur){
var oTd = document.createElement("td");
if(key==="sex"){
oTd.innerHTML = cur[key]===0?"男":"女";
}else{
oTd.innerHTML =cur[key];
}
oTr.appendChild(oTd);
}
frg.appendChild(oTr);
}
tBody.appendChild(frg);
frg = null;
}
bind()
//实现隔行换色
function changeBg(){
for(var i = 0;i<oRows.length;i++){
oRows[i].className = i%2===1?"bg":null;
}
}
changeBg();
//表格排序方法:实现按照年龄这一列排序
function sort(n){//n是当前点击这一列的索引
//把存储所有行的类数组转化为数组
var ary = utils.listToArray(oRows);
var _this = this;
//给数组排序：按照每一行中的第二列的内容
//点击当前列，需要让其他的列的flag存储的值回归到初始值-1，这样在返回头点击其他列，才是按照升序排列
for（var k = 0;k<oThs.length;k++）{
if(oThs[k]!==this){
oThs[k].flag = -1;
}
}
_this.flag*=-1;
ary.sort(function(a,b){
var curInn = a.cells[n].innerHTML;
var nexInn = b.cells[n].innerHTML;
var curInnNum = parseFloat(a.cells[n].innerHTML);
var nexInnNum = parseFloat(b.cells[n].innerHTML);
if(isNaN(curInnNum) || isNaN(nexInnNum)){//处理非数字的排序
return (curInn.localeCompare(nexInn))*_this.flag;
}
return (curInnNum-nexInnNum)*_this.flag
})
//按照ary中的最新顺序，把每一行重新的添加到tBody中
var frg = document.createDocumentFragment();
for(var i = 0;i<ary.length;i++){
frg.appendChild(ary[i])
}
tBody.appendChild(frg);
frg = null;
//按照最新的顺序 重新进行隔行换色
changeBg();
}
//点击所有具有class='cursor'这个样式的都 进行排序
for(var i = 0;i<oThs.length;i++){
var curTh = oThs[i];
curTh.index = i;//获取索引
curTh.flag = -1;//升降序
if(curTh.className==='cursor'){
curTh.onclick = function(){
sort.call(this,this.index);
}
}
}
</script>
</body>
</html>
数据data.txt代码
[ { "name":"令狐冲", "age":24, "score":98, "sex":0 }, { "name":"任盈盈", "age":22, "score":60, "sex":1 }, { "name":"岳灵珊", "age":21, "score":88, "sex":1 }, { "name":"岳不群", "age":26, "score":96, "sex":0 }, { "name":"林平之", "age":23, "score":90, "sex":0 } ]
