Table sorter包括JavaScript和一点CSS,能够让原始的html table变得可以分别按照各栏数据值,对各行排序。
效果
- 在表头任意一个栏目中点击一下,下面各行将按照此栏目值的升序排序
按照字符串比较来确定顺序 - 再次点击该栏目,变更为降序排序
- 点击其它栏目,则按其它栏目的值重新排序
- 注意,排序时,栏目奇偶行的背景色保持奇数白色、偶数浅灰色
要求
- 不能改动原html,只能够添加js和css文件
- 不能使用任何类库,只能用原生DOM API
- 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",