113JS原生：表格排序

最新推荐文章于 2022-09-02 21:05:10 发布

weixin_30325487

最新推荐文章于 2022-09-02 21:05:10 发布

阅读量131

点赞数

原文链接：http://www.cnblogs.com/gushixianqiancheng/p/10967290.html

版权

这里的表格排序，包含按姓名、年龄、分数、性别等汉字和数字的排序。用纯原生JavaScript代码实现，同时还实现了隔行变色。
```javascript
var data=null;
function getData(){
    var xml=new XMLHttpRequest;
    xml.open('get',url,false);
    xml.onreadystatechange=function(){
        if(xml.readyState===4&&/^2\d{2}$/.test(xml.status)){
            data=utils.jsonParse(xml.responseText)
        }
    };
    xml.send(null);
}
```

```html:run
<!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=[
        {"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}
    ];
//绑定原始数据
    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;
        }
    }
//绑定点击事件
    for(var i=0;i<th.length;i++){
        if(th[i].className==="cursor"){
            th[i].flag=-1;
            th[i].index=i;
            th[i].οnclick=function(){
                sortArray.call(this,this.index);
            }
        }
    }
//类数组转化为数组
    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 sortArray(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(rowA,rowB){
            var rowAA= rowA.cells[n].innerHTML;
            var rowBB= rowB.cells[n].innerHTML;
            if(isNaN(rowAA) && isNaN(rowBB)){
                return rowAA.localeCompare(rowBB)*that.flag;
            }
            return (rowAA-rowBB)*that.flag;
        });
        var frg=null;
        for( i=0;i<ary.length;i++){
            frg=ary[i];
            body.appendChild(frg);
        }
        changeColor();
    }
</script>
</body>
</html>
```
附：表格属性

1、border-collapse:collapse//单元格框合二为一
2、cellspacing="0"//单元格之间的距离
3、cellpadding="0"//单元格的内补
4、border="1"//单元格框线宽度
5、rowspan="2"//单元格纵向跨度
6、colspan="2"//单元格横向跨度

转载于:https://www.cnblogs.com/gushixianqiancheng/p/10967290.html

weixin_30325487

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
113JS原生：表格排序

这里的表格排序，包含按姓名、年龄、分数、性别等汉字和数字的排序。用纯原生JavaScript代码实现，同时还实现了隔行变色。```javascriptvar data=null;function getData(){ var xml=new XMLHttpRequest; xml.open('get',url,false); xml.onreadystatechange=func...
复制链接

扫一扫