<html> <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 summary="summary here"> <caption> Main Title </caption> <col/> <col/> <col/> <thead> <tr> <th>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>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>
TableSort.js表格排序插件使用方法详解
内容版权声明：除非注明，否则皆为本站原创文章。