表格排序（小综合的例子）

表格排序

通过ajax来动态获取数据，结合前面学的数字和汉字的排序，动态绑定数据到页面，隔行换色，实现一个小例子。

• 一个简单的表格排序，逻辑还是挺多的，重新熟悉了一下table，知道咋样从表格中获取表格中的元素，隔行换色的原理，类数组转数组，实现ajax的四步骤，汉字的比较排序，绑定数据到页面的两种常用的方法，

Html与css代码

            
            
icessun的武林世界
            
            
            

    
                

                    
name
                    
age
                    
level
                    
sex
                
            
            
            

                
                
                
                
                
            
            
        

使用的数据源

data.txt

[{"name":"郭靖","age":18,"level":98,"sex":0},{"name":"黄蓉","age":16,"level":88,"sex":1},{"name":"杨康","age":17,"level":78,"sex":0},{"name":"梅超风","age":40,"level":90,"sex":1},{"name":"洪七公","age":60,"level":100,"sex":0},{"name":"穆念慈","age":20,"level":50,"sex":1}]

js代码

• 获取元素（我们需要操作的元素，表格元素的获取和我们的平常的元素获取有点不同）
• 获取数据（ajax动态的获取，创建AJAX的四步骤）
• 绑定数据（字符串的拼接（简单）或者是碎片动态创建元素）
• 隔行换色（%求余的技巧的应用，有几种情况就%几）
• 表格排序（实现数字和汉字的排序，当我们点击一个排序后，在去操作其他的排序，然后返回来操作第一次点击的排序，还是原先的排序）

//获取元素

var oTab=document.getElementById('tab');
//获取表格中的表头thead 表头是唯一的
var tHead=oTab.tHead;
//一个表格里面有n个tbody表体，是一个集合；但是我们需要的是第一个【0】tbody
var tBody=oTab.tBodies[0];
//表头中的第一行所有的列  aCells里面包含列里面的内容innerHTML
var aCells=tHead.rows[0].cells;
//表体中所有的行
var aRows=tBody.rows;


//获取数据 封装在一个函数里面
var data=null;
getData();
function getData(){
//创建一个对象是为了获取对象身上的属性和方法  实例创建对象
     var xml=new XMLHttpRequest();
    //默认是异步 不写 
    xml.open("GET","data.txt");
    //发送请求
     xml.send(null);
     //响应请求
     xml.onreadystatechange=function(){
     if(xml.readyState==4&&/^2\d{2}$/.test(xml.status)){
     //处理响应数据 转成一个json格式的字符串
        data=utils.jsonParse(xml.responseText);
        console.log(data);//data获取的是一个json格式的数据对象
        //绑定数据的函数调用，可以拿到data数据
        bind();
            }
      }
}

// 绑定数据 

function bind(){
//字符串拼接的方法
var str='';
for(var i=0;i'+data[i].age+''+data[i].level+''+data[i].sex+''
}

//循环完了，把字符串插入到页面里面,字符串插入到页面使用innerHTML

tBody.innerHTML=str;


}


// 动态创建元素加上文档碎片的方法
function bind(){
//创建文档碎片
     var frg=document.creatDocumentFragment();
     for(var i=0;i