JavaScript实现表格排序

页面导航:首页 > 网络编程 > JavaScript > JavaScript实现表格排序

JavaScript实现表格排序

来源: 作者: 时间:2016-02-02 09:59 【

Table sorter包括JavaScript和一点CSS,能够让原始的html table变得可以分别按照各栏数据值,对各行排序。效果在表头任意一个栏目中点击一下,下面各行将按照此栏目值的升序排序 按照字符

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

效果

在表头任意一个栏目中点击一下,下面各行将按照此栏目值的升序排序
按照字符串比较来确定顺序 再次点击该栏目,变更为降序排序 点击其它栏目,则按其它栏目的值重新排序 注意,排序时,栏目奇偶行的背景色保持奇数白色、偶数浅灰色

要求

不能改动原html,只能够添加js和css文件 不能使用任何类库,只能用原生DOM API JavaScript必须模块化,JS的调用入口,必须按照下面的图示:
入口

这里写图片描述
这里写图片描述
JS代码:<喎"http://www.2cto.com/kf/ware/vc/" target="_blank" class="keylink">vcD4KCjxwcmUgY2xhc3M9"brush:java;">"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]); }

:

    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");
}
Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<