原生js實現table的排序

原生js實現table的排序

今天遇到了一個問題就是使用原生js對table標籤進行排序
一開始的時候陷入了一個誤區就是首先獲取table，而後每次比較完大小都會交換children的值，準備到最後吧children的值賦給table
可是問題出現了，就是每次操做children的值都沒有效果。
最後發現本身走入了一個誤區就是想要操做html標籤只能經過修改innerHtml來進行操做，操做完innerhtml後children會自動改變

直接上代碼吧

HTML代碼

<table>
        <thead>
            <tr><th>id</th><th>price</th><th>sales</th></tr>
        </thead>
        <tbody id="jsList">
            <tr><td>1</td><td>10.0</td><td>800</td></tr>
            <tr><td>2</td><td>30.0</td><td>600</td></tr>
            <tr><td>3</td><td>20.5</td><td>700</td></tr>
            <tr><td>4</td><td>40.5</td><td>500</td></tr>
            <tr><td>5</td><td>60.5</td><td>300</td></tr>
            <tr><td>6</td><td>50.0</td><td>400</td></tr>
            <tr><td>7</td><td>70.0</td><td>200</td></tr>
            <tr><td>8</td><td>80.5</td><td>100</td></tr>
        </tbody>
    </table>

代碼

function sort(type, order) {
    var table = document.getElementById("jsList");
    var trArr = table.children;
    var intType;
    if (type == "id") {
        intType = 0;
    }
    else if (type == "price") {
        intType = 1;
    }
    else if (type == "sales") {
        intType = 2;
    }
var temp
    if (order == "asc") {
        for (var i = 0; i < trArr.length-1; i++) {
            for(j=0;j<trArr.length-i-1;j++){
                if((trArr[j].children[intType].innerHTML-0)>(trArr[j+1].children[intType].innerHTML-0)){
                    temp=trArr[j].innerHTML;
                    trArr[j].innerHTML=trArr[j+1].innerHTML;
                    trArr[j+1].innerHTML=temp;

                }

            }

        }
    } else {
        for (var i = 0; i < trArr.length-1; i++) {
            for(j=0;j<trArr.length-i-1;j++){
                if((trArr[j].children[intType].innerHTML-0)<(trArr[j+1].children[intType].innerHTML-0)){
                    temp=trArr[j].innerHTML;
                    trArr[j].innerHTML=trArr[j+1].innerHTML;
                    trArr[j+1].innerHTML=temp;

                }

            }

        }
    }

}