2018-09-13 前端实现表格按某列排序

HTML

<table id="table" cellpadding="1" cellspacing="1">
    <thead>
        <tr bgcolor="grey">
            <th>姓名</th>
            <th onclick="sortTable(1)">力量</th>
            <th onclick="sortTable(2)">敏捷</th>
            <th onclick="sortTable(3)">智力</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>德鲁伊</th>
            <td>17</td>
            <td>24</td>
            <td>13</td>
        </tr>
        <tr>
            <th>月之骑士</th>
            <td>15</td>
            <td>22</td>
            <td>16</td>
        </tr>
        <tr>
            <th>众神归王</th>
            <td>19</td>
            <td>35</td>
            <td>20</td>
        </tr>
        <tr>
            <th>流浪剑客</th>
            <td>23</td>
            <td>15</td>
            <td>14</td>
        </tr>
    </tbody>
</table>

JS

<script type="text/javascript">
    var isSort = [false,false,false];//标记是否排过序
    function sortTable (colNo) {
        var rowsArray = [];//表格中所有行的集合
        var colsArray = [];//表格中所有列的集合
        var tbody = document.getElementsByTagName('tbody')[0];
        //初始化行和列
        for (var i = 0; i < tbody.rows.length; i++) {
            rowsArray[i] = tbody.rows[i];
            colsArray[i] = rowsArray[i].cells[colNo];
            console.log(typeof(colsArray[i]));
        }
        //排序
        console.log(isSort[colNo])
        if (!isSort[colNo]) {//isSort为false时，降序排列
            isSort[colNo] = true;
            colsArray.sort(function (a,b) {
                return b.innerHTML - a.innerHTML;//将被点的那一列降序排序
            });
        }else{
            //此时已经降序排序过了，对数组逆序即可
            colsArray.reverse();
            isSort[colNo] = false;
        }
        for (var i = 0; i < tbody.rows.length; i++) {
            console.log(rowsArray[i]);
        }
        //当某一列排序后将表格所有元素的值放到新的数组中
        var rowsTempArray = [];
        for (var i = 0; i < rowsArray.length; i++) {
            var colsTempArray = [];
            for (var j = 0; j < colsArray.length; j++) {
                //将i行的所有列的内容保存在colsTempArray[j]中
                colsTempArray[j] = colsArray[i].parentNode.cells[j].innerHTML;;
            }
            //将一行内容保存到rowsTempArray。
            rowsTempArray[i] = colsTempArray;
        }
        //重绘页面
        for (var i = 0; i < rowsArray.length; i++) {
            for (var j = 0; j < colsArray.length; j++) {
                rowsArray[i].cells[j].innerHTML = rowsTempArray[i][j];
            }
        }
    }
</script>