单例模式跟构造函数模式书写表格排序

首先简单说下表格排序的思路：
1：首先我们要创建一个表格，然后 加上简单的样式

<table id="myTable" cellpadding="0" cellspacing="0">
    <thead>
    <th><input type="checkbox"></th>
    <th class="active">姓名</th>
    <th class="active">年龄</th>
    <th class="active">成绩</th>
    </thead>
    <tbody>
    <tr>
        <td><input type="checkbox"></td>
        <td>张三</td>
        <td>24</td>
        <td>123</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>张三</td>
        <td>24</td>
        <td>123</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>李四</td>
        <td>23</td>
        <td>125</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>王五</td>
        <td>21</td>
        <td>121</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>赵六</td>
        <td>27</td>
        <td>93</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>小明</td>
        <td>29</td>
        <td>103</td>
    </tr>
    </tbody>
</table>

样式

table,thead,tbody,th,tr,td{
    list-style: none;margin: 0;padding: 0;font-family: "\5FAE\8F6F\96C5\9ED1", Helvetica, sans-serif;
}
table {width: 400px;padding: 20px;margin: 100px auto 0;border: 1px solid #EE5757;
    border-radius: 10px;font-size: 14px;color: #333;}
table thead th{width: 100px;height: 40px;text-align: center;line-height: 40px;}
table thead .active{cursor: pointer;user-select: none}
table tbody tr{width: 400px;height: 40px;text-align: center;line-height: 40px;}
table tbody .c0{background-color: #00A5FF}

2：获取所有操作的DOM元素并实现一个各行变色的效果

var oTable = document.getElementById("myTable");
var tHead = oTable.tHead;
var oTh = tHead.getElementsByTagName("th");
var tBody = oTable.tBodies.item(0);
var tRows = tBody.rows;
var myFunction = {
    changeBg: function (ele) {
        for (var i = 0; i < ele.length; i++) {
            ele[i].className=" ";
            i % 2 ? null : ele[i].className = "c0";
        }
    },...}

3：重点来了，由于我们获得的元素是一个对象数据类型，但是我们打印出来，发现其是一个类数组，那么我们想排序，除了传统的老方法，我们可以用call改变this的指向，来简单实现我们的需求

toArray: function (ele) {
        var ary = [];
        try {
            ary = [].slice.call(ele);
        } catch (err) {
            for (var i = 0; i < ele.length; i++) {
                ary.push(ele[i]);
            }
            ele = ary;
        }
        return ary;
    }

上诉代码，其实是在数组这个内置类的原型上找到了slice方法，将里面的this替换成了我们的传送对象，这样得到的返回值就是一个数组然后我们在利用sort来排序，这样做简单方便，具体代码意思我就不详细解释了，应该很简单，我就直接po代码上来了

单例模式下的表格排序

var oTable = document.getElementById("myTable");
var tHead = oTable.tHead;
var oTh = tHead.getElementsByTagName("th");
var tBody = oTable.tBodies.item(0);
var tRows = tBody.rows;
var myFunction = {
    changeBg: function (ele) {
        for (var i = 0; i < ele.length; i++) {
            ele[i].className=" ";
            i % 2 ? null : ele[i].className = "c0";
        }
    },
    toArray: function (ele) {
        var ary = [];
        try {
            ary = [].slice.call(ele);
        } catch (err) {
            for (var i = 0; i < ele.length; i++) {
                ary.push(ele[i]);
            }
            ele = ary;
        }
        return ary;
    },
    mySort: function (ele, i) {
        if(ele.flag){
            ele.flag*=-1;
        }else{
            ele.flag=1;
        };
        var frg=document.createDocumentFragment();
        tRows= tRows.sort(function (a, b) {
            var tempA = a.cells[i].innerHTML;
            var tempB = b.cells[i].innerHTML;
            var curA = parseFloat(tempA);
            var curB = parseFloat(tempB);
            if (!isNaN(parseFloat(a.cells[i].innerHTML)) && !isNaN(parseFloat(a.cells[i].innerHTML))) {
                return ele.flag*(curA - curB);
            } else {
                return ele.flag*(tempA.localeCompare(tempB));
            }
        });
        for(var i=0;i<tRows.length;i++){
            frg.appendChild(tRows[i]);
        };
        console.log(tRows)
        myFunction.changeBg(tRows);
        tBody.appendChild(frg);
    },
    inputClick:function(){
        var oInput=document.getElementsByTagName("input");
        for(var j=0;j<oInput.length;j++){
            oInput[j].oIndex=j;
            oInput[j].onclick=function(){
                if(this.oIndex==0){
                    for(var i=1;i<oInput.length;i++){
                        oInput[i].checked=this.checked;
                    }
                    return;
                };
                var flag=true;
                for(var j=1;j<oInput.length;j++){
                    if(!oInput[j].checked){
                        flag=false;
                        break;
                    }
                }
                oInput[0].checked=flag;
            }

        }
    },
    start:function(){
        myFunction.changeBg(tRows);
        tRows = myFunction.toArray(tRows);
        for(var k=0;k<oTh.length;k++){
            if(oTh[k].className=="active"){
                oTh[k].onclick=(function(k){
                    return function(){
                        myFunction.mySort(this,k);
                    }
                })(k)
            }
        }
    }
};
myFunction.start();
myFunction.inputClick();

构造函数下的表单排序

function TableSort(){
    this.oTable = document.getElementById("myTable");
    this.tHead = this.oTable.tHead;
    this.oTh = this.tHead.getElementsByTagName("th");
    this.tBody = this.oTable.tBodies.item(0);
    this.tRows = this.tBody.rows;
    this.oInput=document.getElementsByTagName("input");
}
var tPrototype=TableSort.prototype;
tPrototype.changeBg=function(ele){
    for (var i = 0; i < ele.length; i++) {
        ele[i].className = " ";
        i % 2 ? null : ele[i].className = "c0";
    }
};
tPrototype.toArray=function (ele) {
    var ary = [];
    try {
        ary = [].slice.call(ele);
    } catch (err) {
        for (var i = 0; i < ele.length; i++) {
            ary.push(ele[i]);
        }
        ele = ary;
    }
    return ary;
};
tPrototype.mySort=function (ele, i) {
    if(ele.flag){
        ele.flag*=-1;
    }else{
        ele.flag=1;
    };
    var frg=document.createDocumentFragment();
    this.tRows= this.tRows.sort(function (a, b) {
        var tempA = a.cells[i].innerHTML;
        var tempB = b.cells[i].innerHTML;
        var curA = parseFloat(tempA);
        var curB = parseFloat(tempB);
        if (!isNaN(parseFloat(a.cells[i].innerHTML)) && !isNaN(parseFloat(a.cells[i].innerHTML))) {
            return ele.flag*(curA - curB);
        } else {
            return ele.flag*(tempA.localeCompare(tempB));
        }
    });
    for(var i=0;i<this.tRows.length;i++){
        frg.appendChild(this.tRows[i]);
    };
    this.tBody.appendChild(frg);
    otable.changeBg(otable.tRows);
};
tPrototype.inputSort=function(){
    var oInput=this.oInput;
    for(var j=0;j<oInput.length;j++){
        oInput[j].oIndex=j;
        oInput[j].onclick=function(){
            if(this.oIndex==0){
                for(var i=1;i<oInput.length;i++){
                    oInput[i].checked=this.checked;
                }
                return;
            }
            var flag=true;
            for(var j=1;j<oInput.length;j++){
                if(!oInput[j].checked){
                    flag=false;
                    break;
                }
            }
            oInput[0].checked=flag;
        }
    }
};
var otable=new TableSort;
otable.changeBg(otable.tRows);
otable.tRows=otable.toArray(otable.tRows);
otable.inputSort();
for(var k=0;k<otable.oTh.length;k++){
    if(otable.oTh[k].className=="active"){
        otable.oTh[k].onclick=(function(k){
            return function(){
                otable.mySort(this,k);
            }
        })(k)
    }
}