JavaScript中级（四）---- 表格排序

最新推荐文章于 2024-06-10 19:04:30 发布

wyn314

最新推荐文章于 2024-06-10 19:04:30 发布

阅读量253

点赞数

分类专栏： js 中级文章标签： javascript 表格排序

本文链接：https://blog.csdn.net/csdnwyn314/article/details/76154795

版权

js 中级专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1. 表格排序要考虑到的问题

1.获取并解析数据
2.数据绑定
3.隔行变色
4.表格排序

2. 说到解析数据不得不了解的JSON

在JSON中属性名都有双引号，并且引号不能省略

    var obj={name:'aa',age:0};         //对象
    var obj={"name":'aa',"age":0};     //JSON

json的作用：

JSON属于window下的全局属性，他有两个方法：
JSON.parse(str):把字符串转成JSON对象（JSON格式的数据）； //IE6-7不兼容
JSON.stringify(json):把JSON格式的数据转成JSON格式的字符串；

3. javascript表格排序代码分享

共分为4个部分：
index.html
data.json
utils.js
tab.js

1. index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .table{
            width: 600px;
            padding:10px;
            border: 4px solid lightgreen;
            box-shadow: 4px 4px 10px darkGreen;
            margin:30px auto;
            border-radius: 10px;
        }
        .table tr{
            height: 40px;
            line-height: 40px;
        }
        .table tr.bg0{
            background: lightcyan;
        }
        .table tr.bg1{
            background: lightgoldenrodyellow;
        }
        .table tr td{
            text-align: center;
        }
        .table thead tr{
            background: darkgreen;
            color: white;
        }
        .cursor{
            cursor: pointer;
        }
    </style>
</head>
<body>
<table class="table" id="tab" cellpadding="0" cellspacing="0">
    <thead>
        <tr>
            <th class="cursor">名字</th>
            <th class="cursor">年龄</th>
            <th class="cursor">分数</th>
            <th>性别</th>
        </tr>
    </thead>
    <tbody>
        <!--<tr class="bg0">
              <td>赵田</td>
              <td>45</td>
              <td>45</td>
              <td>0</td>
        </tr>-->
    </tbody>
</table>
<script src="utils.js"></script>
<script src="tab2.js"></script>
</body>
</html>

2. data.json

[
    {"name": "赵田", "age": 14, "score": 89, "sex": 0},
    {"name": "钱佳", "age": 56, "score": 67, "sex": 1},
    {"name": "孙丝", "age": 58, "score": 79, "sex": 1},
    {"name": "李四", "age": 32, "score": 80, "sex": 0},
    {"name": "周董", "age": 55, "score": 56, "sex": 1},
    {"name": "三桂", "age": 0, "score": 26, "sex": 0}
]

3. utils.js

var utils=(function(){
         /**
         * makeArray:类数组转数组
         * @param arg
         * @returns {Array}
         */
         function makeArray(arg){
            var ary=[];
            try{
                ary=Array.prototype.slice.call(arg);
            }catch(e){
                for(var i=0; i<arg.length; i++){
                    ary.push(arg[i]);
                }
            }
            return ary;
        }

        /**
         * jsonParse:把JSON格式的字符串转成JSON格式的数据（对象）
         * @param str
         * @returns {Object}
         */
         function jsonParse(str){
            return 'JSON' in window?JSON.parse(str):eval('('+str+')');
        }

    return {
        makeArray: makeArray,        
        jsonParse: jsonParse
    }
})();

4. tab.js

(function(){
    var oTab=document.getElementById('tab');
    var tHead=oTab.tHead;
    var tCells=tHead.rows[0].cells;
    var tBody=oTab.tBodies[0];
    var aRows=tBody.rows;
    var data=null;
    //1.获取并解析数据
    getData();
    function getData(){
        var xml=new XMLHttpRequest();
        xml.open('get','data.json',false);
        xml.onreadystatechange=function(){
            if(xml.readyState===4 && /^2\d{2}$/.test(xml.status)){ data=utils.jsonParse(xml.responseText); }
        };
        xml.send();
    }
    //2.绑定数据
    bind();
    function bind(){
        var frg=document.createDocumentFragment();
        for(var i=0; i<data.length; i++){
            var cur=data[i];
            var oTr=document.createElement('tr');
            for(var attr in cur){ if(attr==='sex'){ cur[attr]=cur[attr]===0?'男':'女'; } var oTd=document.createElement('td'); oTd.innerHTML=cur[attr]; oTr.appendChild(oTd); }
            frg.appendChild(oTr);
        }
        tBody.appendChild(frg);
        frg=null;
    }
    //3.隔行换色
    changeColor();
    function changeColor(){ for(var i=0; i<aRows.length; i++){ aRows[i].className='bg'+i%2; } } //4.表格排序 function sort(n){ var _this=this; for(var i=0; i<tCells.length; i++){ tCells[i].flag=i===n?tCells[i].flag*-1:-1; } //1.类数组转数组--把获取到每一行的元素集合 转成 数组 var ary=utils.makeArray(aRows); //2.数组的sort排序:每一行的索引为1的每一列的内容； ary.sort(function(a,b){ a= a.cells[n].innerHTML; b= b.cells[n].innerHTML; if(isNaN(a) && isNaN(b)){ return a.localeCompare(b)*_this.flag; } return (a-b)*_this.flag;//是数字的时候，按数字排序 }); window.ary=ary; //3.把已经排好序的数组重新放入页面 var frg=document.createDocumentFragment(); for(var i=0; i<ary.length; i++){ frg.appendChild(ary[i]); } tBody.appendChild(frg); frg=null; changeColor(); } for(var i=0; i<tCells.length; i++){ if(tCells[i].className==='cursor'){ tCells[i].flag=-1; tCells[i].index=i; tCells[i].onclick=function(){ sort.call(this,this.index); //sort方法中的this都是当前发生点击事件的这一列； } } } })();