Phiên bản đầy đủ: jsB@nk » Biểu mẫu » Bảng » Bảng thông minh
URL: https://www.javascriptbank.com/smarttables-sortable-sheet.html
Hiệu ứng tạo một bảng chứa các dữ liệu có thể thực hiện thao tác sắp xếp">sắp xếp.
Phiên bản đầy đủ: jsB@nk » Biểu mẫu » Bảng » Bảng thông minh
URL: https://www.javascriptbank.com/smarttables-sortable-sheet.html
<style type="text/css"><!--.smartTable{border-collapse:collapse; margin:20px auto;}.smartTable th, .smartTable td{border:1px solid #000000; padding:5px;}.smartTable th{background-color:#666666; color:#FFFFFF;}.smartTable .r0 td{}.smartTable .r1 td{background-color:#F6F6F6;}.smartTable .over td{background-color:#FF8800;}.smartTable .sortedAsc{background-color:#66CC66 !important;}.smartTable .sortedDesc{background-color:#CC6666 !important;}--></style><script type="text/javascript"><!--// Created by RoBorg - http://javascript.geniusbug.com | http://www.roborg.co.ukfunction smartTableInit() { var tables = document.getElementsByTagName('table'); var len = tables.length; for(var i=0; i<len; i++) { if(tables[i].className.indexOf('smartTable') != -1) smartTable(tables[i]); }}function smartTable(t) { var trs = t.getElementsByTagName('tbody').item(0).getElementsByTagName('tr'); var len = trs.length; for(var i=0; i<len; i++) { trs[i].className = 'r' + (i%2); trs[i].onmouseover = function() { this.className += ' over'; } trs[i].onmouseout = function() { this.className = this.className.replace(/s+over/, ''); } } var rows = t.rows; var numRows = rows.length; for(var i=0; i<numRows; i++) { var cells = rows[i].cells; var numCells = cells.length; for(var j=0; j<numCells; j++) { if(j && i) break; if(i) cells[j].onclick = new Function('sortByRow(this, ' + i + ');'); else cells[j].onclick = new Function('sortByCol(this, ' + j + ');'); } }}function sortByRow(th, r) { var t = th; while(t.tagName.toLowerCase() != 'table') t = t.parentNode; var dir = 1; if(t.sortedRow) { if(Math.abs(t.sortedRow) == r+1) dir = t.sortedRow == r+1?-1:1; } var vals = new Array(); var val; var len = t.rows[r].cells.length; var cells = t.rows[r].cells; for(var i=1; i<len; i++) { val = cells[i].innerHTML; vals[vals.length] = {'val':val,'i':i}; } vals = vals.sort(sortCell); if(dir == -1) vals = vals.reverse(); var newT = t.cloneNode(true); for(var j=0; j<t.rows.length; j++) { if(j) { var cName = newT.rows[j].cells[0].className.replace(/s*sorted(Asc|Desc)/, ''); if(j == r) cName += (dir == 1?' sortedAsc':' sortedDesc'); newT.rows[j].cells[0].className = cName; } for(var i=0; i<vals.length; i++) { newT.rows[j].replaceChild(t.rows[j].cells[vals[i].i].cloneNode(true), newT.rows[j].cells[i+1]); } } t.parentNode.replaceChild(newT, t); newT.sortedRow = (r+1) * dir; smartTable(newT);}function sortByCol(th, c) { var t = th; while(t.tagName.toLowerCase() != 'table') t = t.parentNode; var dir = 1; if(t.sortedCol) { if(Math.abs(t.sortedCol) == c+1) dir = t.sortedCol == c+1?-1:1; } var vals = new Array(); var val; for(var i=1; i<t.rows.length; i++) { if(!t.rows[i].cells[c]) val = 0; else val = t.rows[i].cells[c].innerHTML; vals[vals.length] = {'val':val,'i':i}; } vals = vals.sort(sortCell); if(dir == -1) vals = vals.reverse(); var newT = t.cloneNode(true); var len = newT.rows[0].cells.length; var cells = newT.rows[0].cells; for(var i=0; i<len; i++) { var cName = cells[i].className.replace(/s*sorted(Asc|Desc)/, ''); if(i == c) cName += (dir == 1?' sortedAsc':' sortedDesc'); cells[i].className = cName; } for(var i=0; i<vals.length; i++) { newT.rows[i+1].parentNode.replaceChild(t.rows[vals[i].i].cloneNode(true), newT.rows[i+1]); } t.parentNode.replaceChild(newT, t); newT.sortedCol = (c+1) * dir; smartTable(newT);}function sortCell(a, b) { if(a.val == b.val) return 0; return a.val < b.val?-1:1;}// Multiple onload function created by: Simon Willison// http://simonwillison.net/2004/May/26/addLoadEvent/function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function() { if (oldonload) { oldonload(); } func(); } }}addLoadEvent(function() { smartTableInit();});//--></script><table class="smartTable"> <tbody><tr class="r0"> <th> </th> <th>Cow</th> <th>Sheep</th> <th>Pig</th> <th>Dog</th> </tr><tr class="r1"> <td>Name</td> <td>Daisy</td> <td>Fluffy</td> <td>Oinky</td> <td>Barky</td> </tr><tr class="r0"> <td>Height</td> <td>180cm</td> <td>121cm</td> <td>100cm</td> <td>056cm</td> </tr><tr class="r1"> <td>Deliciousness</td> <td>85%</td> <td>68%</td> <td>93%</td> <td>13%</td> </tr><tr class="r0"> <td>Noise</td> <td>Moo</td> <td>Baa</td> <td>Oink</td> <td>Woof</td> </tr></tbody></table>