JavaScript實現表格排序

標籤：javascript   html   表格排序   

Table sorter包括JavaScript和一點CSS，能夠讓原始的html table變得可以分別按照各欄資料值，對各行排序。

效果

1. 在表頭任意一個欄目中點擊一下，下面各行將按照此欄目值的升序排序
   按照字串比較來確定順序
2. 再次點擊該欄目，變更為降序排序
3. 點擊其它欄目，則按其它欄目的值重新排序
4. 注意，排序時，欄目奇偶行的背景色保持奇數白色、偶數淺灰色

要求

1. 不能改動原html，只能夠添加js和css檔案
2. 不能使用任何類庫，只能用原生DOM API
3. JavaScript必須模組化，JS的調用入口，必須按照下面的圖示：
   

JS代碼:

"use strict";window.onload = function () {    var tables = getAllTables();    makeAllTablesSortalbe(tables);};//嵌入的話用下面兩行..// var tables = getAllTables();// makeAllTablesSortalbe(tables);function getAllTables() {    return document.getElementsByTagName("table");}function makeAllTablesSortalbe(tables) {    for (var i = 0; i < tables.length; i++)        makeSort(tables[i]);}//讓列表變得可排序function makeSort(table) {    var th = table.getElementsByTagName("th");    for (var i = 0; i < th.length; i++) {        //綁定按鈕事件        th[i].onclick = function () {            var index = 0;            changeStyle(th, this);            //找出索引值            for (var j = 0; j < th.length; j++) {                if (this == th[j])                    index = j;            }            sortByTh(table, index, this.className);        };    }}//改變樣式function changeStyle(th, t) {    for (var i = 0; i < th.length; i++) {        if (th[i] == t) {            if (th[i].className.indexOf("descend") != -1 )                th[i].className = th[i].className.replace("descend", "ascend");            else if (th[i].className.indexOf("ascend") != -1 )                th[i].className = th[i].className.replace("ascend", "descend");            else                th[i].className += " descend";        } else {            th[i].className = th[i].className.replace("descend", "");            th[i].className = th[i].className.replace("ascend", "");        }    }}//排序function sortByTh(table, index, className) {    var action = className.indexOf("descend") != -1 ? "descend" : "ascend";    var array = [];    for (var i = 1; i < table.getElementsByTagName("tr").length; i++) {        array[i-1] = table.getElementsByTagName("tr")[i];    }    array.sort(function (a, b) {        //升序        if (action == ‘descend‘) {            return a.cells[index].innerHTML <= b.cells[index].innerHTML;        } else {        //降序            return a.cells[index].innerHTML >= b.cells[index].innerHTML;        }    });    for (var i = 0; i < array.length; i++)        table.getElementsByTagName("tbody")[0].appendChild(array[i]);}

CSS:

    border: 1px solid gray;    margin: 0;    padding: 3px;    border-collapse: collapse;}tr:nth-child(even),tr:hover {    background-color: #DEDEDE;}th {    text-align: left;    background-color: #041A7F;    color: white;    font-weight:  bold;    padding-right:16px;}.ascend, .descend {    background-color: #A4B0FC;    background-position: right;    background-repeat: no-repeat;}.ascend {    background-image: url("ascend.png");}.descend {    background-image: url("descend.png");}

JavaScript實現表格排序