JavaScript：表格排序

最後更新：2017-02-03 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：title enter medium doc utf-8 pre turn 表格 state

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        #table{
            width:600px;
            border:3px solid darkgreen;
            margin:20px auto;
            text-align: center;
            -webkit-user-select:none;
            -moz-user-select:none;
            -o-user-select:none;
            -ms-user-select:none;
        }
        #table tr{
            height:40px;
            line-height:40px;
        }
        .bg0{
            background: mediumvioletred;
        }
        .bg1{
            background: greenyellow;
        }
        .bg2{
            background: yellow;
        }
    </style>
</head>
<body>
<table id="table" class="table">
    <thead>
        <tr class="bg2">
            <th class="cursor">姓名</th>
            <th class="cursor">年齡</th>
            <th class="cursor">分數</th>
            <th class="cursor">性別</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

<script>
    var table=document.getElementById("table");
    var th=table.tHead.rows[0].cells;
    var body=table.tBodies[0];
    var row=body.rows;
    var data=null;
    getData();
    function getData(){
        var xml=new XMLHttpRequest();
        xml.open("get","data.txt",false);
        xml.onreadystatechange= function () {
            if(xml.readyState===4 && /^2\d{2}$/.test(xml.status)){
                data=jsonParse(xml.responseText);
            }
        };
        xml.send(null);
    }
    function jsonParse(jsonStr){
        return "JSON" in window ? JSON.parse(jsonStr):eval("("+jsonStr+")");
    }
    bind();
    function bind(){
        var frg=document.createDocumentFragment();
        for(var i=0;i<data.length;i++){
            var cur=data[i];
            var tr=document.createElement("tr");
            for(var attr in cur){
                if(attr==="sex"){
                    cur[attr]=cur[attr]===0?"男":"女";
                }
                var td=document.createElement("td");
                td.innerHTML=cur[attr];
                tr.appendChild(td);
            }
            frg.appendChild(tr);
        }
        body.appendChild(frg);
        frg=null;
    }
    changeColor();
    function changeColor(){
        for(var i=0;i<row.length;i++){
            row[i].className="bg"+i%2;
        }
    }
    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;
    }
    function sort(n){
        var that=this;
        for(var i=0;i<th.length;i++){
            th[i].flag=i===n?that.flag*=-1:-1;
        }
        var ary=makeArray(row);
        ary.sort(function(a,b){
            a= a.cells[n].innerHTML;
            b= b.cells[n].innerHTML;
            if(isNaN(a) && isNaN(b)){
                return a.localeCompare(b)*that.flag;
            }
            return (a-b)*that.flag;
        });
        var frg=null;
        for( i=0;i<ary.length;i++){
            frg=ary[i];
            body.appendChild(frg);
        }
        changeColor();
    }
    for(var i=0;i<th.length;i++){
        if(th[i].className==="cursor"){
            th[i].flag=-1;
            th[i].index=i;
            th[i].onclick=function(){
                sort.call(this,this.index);
            }
        }
    }
</script>
</body>
</html>


附檔案：data.txt

[
    {"name": "趙老大", "age": 45, "score": 89, "sex": 0},
    {"name": "錢二妞", "age": 24, "score": 67, "sex": 1},
    {"name": "孫三娘", "age": 38, "score": 79, "sex": 1},
    {"name": "李四爺", "age": 30, "score": 80, "sex": 0},
    {"name": "周姑娘", "age": 65, "score": 56, "sex": 1},
    {"name": "吳三桂", "age": 26, "score": 26, "sex": 0}
]

JavaScript：表格排序

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

JavaScript：表格排序

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support