單例模式跟構造函數模式書寫表格排序

首先簡單說下表格排序的思路：
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)
    }
}