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", "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");
}index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US" xml:lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sortable table</title>
<link rel="stylesheet" type="text/css" href="sorter.css" />
<script type="text/javascript" src="sorter.js"></script>
</head>
<body>
<h1>Sortable table</h1>
<h2>To-Do</h2>
<table id="todo">
<thead>
<tr>
<th>What?</th>
<th>When?</th>
<th>Location</th>
</tr>
</thead>
<tbody>
<tr>
<td>Paris Web 2007</td>
<td>2007-11-15</td>
<td>IBM La Defense / INSIA</td>
</tr>
<tr class="alternate">
<td>Paris On Rails 2007</td>
<td>2007-12-10</td>
<td>Cite des Sciences</td>
</tr>
<tr>
<td>Burger Quiz party</td>
<td>2007-04-14</td>
<td>Volta</td>
</tr>
</tbody>
</table>
<h2>Staff</h2>
<table id="staff">
<thead>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Latest checkin</th>
</tr>
</thead>
<tbody>
<tr>
<td>Richard</td>
<td>Piacentini</td>
<td>2007-03-27</td>
</tr>
<tr class="alternate">
<td>Eric</td>
<td>Daspet</td>
<td>2007-03-28</td>
</tr>
<tr>
<td>Aurore</td>
<td>Jaballah</td>
<td>2007-03-15</td>
</tr>
</tbody>
</table>
</body>
</html>
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");
}