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