TableSort.js

来源：互联网发布：ubuntu搭建hadoop 编辑：程序博客网时间：2024/06/05 04:47
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>TableSort</title><style type="text/css">table {border-collapse: collapse;width: 300px;}table caption {border-right: 1px solid #abc;border-left: 1px solid #abc;border-top: 2px solid #000;border-bottom: 2px solid #000;background-color: #afd;}#sales tr, #sales td {border: 1px solid #abc;text-align: center;}</style></head><body><table id="sales" summary="summary here">  <caption>  Main Title  </caption>  <col/>  <col/>  <col/>  <thead>    <tr>      <th class="asc">Col1</th>      <th>Col2</th>      <th>Col3</th>    </tr>  </thead>  <tbody>    <tr>      <td>A1</td>      <td>S2</td>      <td>W3</td>    </tr>    <tr>      <td>B1</td>      <td>C2</td>      <td>V3</td>    </tr>    <tr>      <td>C1</td>      <td>X2</td>      <td>K3</td>    </tr>  </tbody>  <!-- tfoot><tr><td cols=3 >other description</td></tr></tfoot --></table><button onclick="fn()">Test</button><script language="javascript">function TableSort(id) {this.tbl = document.getElementById(id);this.lastSortedTh = null;if (this.tbl && this.tbl.nodeName == "TABLE") {var headings = this.tbl.tHead.rows[0].cells;for (var i = 0; headings[i]; i++) {if (headings[i].className.match(/asc|dsc/)) {this.lastSortedTh = headings[i];}}this.makeSortable();}}TableSort.prototype.makeSortable = function() {var headings = this.tbl.tHead.rows[0].cells;for (var i = 0; headings[i]; i++) {headings[i].cIdx = i;var a = document.createElement("a");a.href = "#";a.innerHTML = headings[i].innerHTML;a.onclick = function(that) {return function() {that.sortCol(this);return false;}}(this);headings[i].innerHTML = "";headings[i].appendChild(a);}}TableSort.prototype.sortCol = function(el) {var rows = this.tbl.rows;var alpha = [], numeric = [];var aIdx = 0, nIdx = 0;var th = el.parentNode;var cellIndex = th.cIdx;for (var i = 1; rows[i]; i++) {var cell = rows[i].cells[cellIndex];var content = cell.textContent ? cell.textContent : cell.innerText;var num = content.replace(/(\$|\,|\s)/g, "");if (parseFloat(num) == num) {numeric[nIdx++] = {value : Number(num),row : rows[i]}} else {alpha[aIdx++] = {value : content,row : rows[i]}}}function bubbleSort(arr, dir) {var start, end;if (dir === 1) {start = 0;end = arr.length;} else if (dir === -1) {start = arr.length - 1;end = -1;}var unsorted = true;while (unsorted) {unsorted = false;for (var i = start; i != end; i = i + dir) {if (arr[i + dir] && arr[i].value > arr[i + dir].value) {var temp = arr[i];                    arr[i] = arr[i + dir];                    arr[i + dir] = temp;unsorted = true;}}}return arr;}var col = [], top, bottom;if (th.className.match("asc")) {top = bubbleSort(alpha, -1);bottom = bubbleSort(numeric, -1);th.className = th.className.replace(/asc/, "dsc");} else {top = bubbleSort(numeric, 1);bottom = bubbleSort(alpha, 1);if (th.className.match("dsc")) {th.className = th.className.replace(/dsc/, "asc");} else {th.className += "asc";}}    if (this.lastSortedTh && th != this.lastSortedTh) {this.lastSortedTh.className = this.lastSortedTh.className.replace(/dsc|asc/g, "");}this.lastSortedTh = th;    col = top.concat(bottom);var tBody = this.tbl.tBodies[0];for (var i = 0; col[i]; i++) {tBody.appendChild(col[i].row);}}function fn() {var sales = document.getElementById('sales');var sortTable = new TableSort('sales');}</script></body></html>
1 0