JavaScript中怎么实现表格排序-创新互联

本篇文章为大家展示了JavaScript中怎么实现表格排序，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。

Table sorter包括JavaScript和一点CSS，能够让原始的html table变得可以分别按照各栏数据值，对各行排序。

效果

1. 在表头任意一个栏目中点击一下，下面各行将按照此栏目值的升序排序
   按照字符串比较来确定顺序

2. 再次点击该栏目，变更为降序排序

3. 点击其它栏目，则按其它栏目的值重新排序

4. 注意，排序时，栏目奇偶行的背景色保持奇数白色、偶数浅灰色

要求

1. 不能改动原html，只能够添加js和css文件

2. 不能使用任何类库，只能用原生DOM API

3. JavaScript必须模块化，JS的调用入口，必须按照下面的图示：
   

sorter.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");elseth[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");}

index.html

Sortable table
To-Do
What?When?LocationParis Web 20072007-11-15IBM La Defense / INSIAParis On Rails 20072007-12-10Cite des SciencesBurger Quiz party2007-04-14Volta
Staff
First nameLast nameLatest checkinRichardPiacentini2007-03-27EricDaspet2007-03-28AuroreJaballah2007-03-15

sorter.css

table, tr *{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中怎么实现表格排序，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注创新互联行业资讯频道。