js table表格排序程式碼例項
如果表格資料比較多一些的話,可能需要按照一定的順序規則檢視資料。
那麼就用到了排序功能,下面就分享一段程式碼例項,它實現了按照數字列的數字大小排序效果。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> table td a:hover { background-color: #0080c0; } .one { background-color: #80ff00; } .two { background-color: #ff8040; } .three { background-color: #008040; } table { width: 500px; height: 500px; border: #400040 solid 2px; border-collapse: collapse; } table td, th { border: solid 2px; } table th { background-color: #c0c0c0; } </style> <script type="text/javascript"> var flag = true; function loading() { var name; var tabNode = document.getElementById("tabid"); var rows = tabNode.rows; var rowslength = rows.length; for (var x = 1; x < rowslength; x++) { if (x % 2 == 0) { rows[x].className = "one"; } else { rows[x].className = "two"; } rows[x].onmouseover = function () { name = this.className; this.className = "three"; } rows[x].onmouseout = function () { this.className = name; } } } function sortAge() { var tabNode = document.getElementById("tabid"); var rows0 = tabNode.rows; var rows1 = []; for (var x = 1; x < rows0.length; x++) { rows1[x - 1] = rows0[x]; } for (var x = 0; x < rows1.length - 1; x++) { for (var y = x + 1; y < rows1.length; y++) { if (parseInt(rows1[x].cells[1].innerHTML) > parseInt(rows1[y].cells[1].innerHTML)) { var temp = rows1[x]; rows1[x] = rows1[y]; rows1[y] = temp; } } } var ageimg = document.getElementById("ageid"); if (flag) { for (var x = 0; x < rows1.length; x++) { rows1[x].parentNode.appendChild(rows1[x]); } ageimg.innerHTML = "年齡▲"; } else { for (var x = rows1.length - 1; x >= 0; x--) { rows1[x].parentNode.appendChild(rows1[x]); } ageimg.innerHTML = "年齡▼" } flag = !flag; loading(); } window.onload = function () { loading(); var ageid = document.getElementById("ageid"); ageid.onclick = function () { sortAge() } } </script> </head> <body> <table id="tabid"> <tr> <th>課程</th> <th><a href="javascript:void(0)" id="ageid">分數</a></th> <th>所屬網站</th> </tr> <tr> <td>css教程</td> <td>80</td> <td>螞蟻部落</td> </tr> <tr> <td>div教程</td> <td>85</td> <td>螞蟻部落</td> </tr> <tr> <td>js教程</td> <td>90</td> <td>螞蟻部落</td> </tr> <tr> <td>正規表示式</td> <td>86</td> <td>螞蟻部落</td> </tr> <tr> <td>jquery教程</td> <td>70</td> <td>螞蟻部落</td> </tr> <tr> <td>css3教程</td> <td>95</td> <td>螞蟻部落</td> </tr> </table> </body> </html>
相關文章
- table表格美化程式碼例項
- table細線表格例項程式碼
- jQuery table表格隔行換色程式碼例項jQuery
- table表頭分組程式碼例項
- css table細線表格程式碼CSS
- JS中排序的用法和例項JS排序
- JS 預編譯程式碼例項分析JS編譯
- jquery.idTabs.min.js選項卡程式碼例項jQueryJS
- vxe-table 樹表格跨層級拖拽排序排序
- dom操作程式碼例項
- css梯形程式碼例項CSS
- Java學習之7種排序演算法的完整例項程式碼Java排序演算法
- JavaScript in運算子程式碼例項JavaScript
- 設計模式例項程式碼設計模式
- 純css tab選項卡程式碼例項CSS
- jQuery tab選項卡效果程式碼例項jQuery
- JS實現前臺表格排序功能JS排序
- canvas刮刮樂程式碼例項Canvas
- canvas載入效果程式碼例項Canvas
- CSS空心箭頭程式碼例項CSS
- JavaScript運動框架程式碼例項JavaScript框架
- jQuery.map()方法程式碼例項jQuery
- CSS橢圓效果程式碼例項CSS
- CSS條紋背景程式碼例項CSS
- flex居中佈局程式碼例項Flex
- JavaScript取餘數程式碼例項JavaScript
- canvas繪製扇形程式碼例項Canvas
- CSS 隔行變色程式碼例項CSS
- HTML5 拖拽程式碼例項HTML
- JavaScript 阻止事件冒泡程式碼例項JavaScript事件
- [例項分割]Condinst程式碼筆記筆記
- HTML <table>表格概述HTML
- CSS table表格美化CSS
- tpextbuilder- Table 表格UI
- 從例項程式碼講解Node.js Event loop執行機制(1.0.1)Node.jsOOP
- 美化滾動條效果程式碼例項
- canvas原型鐘錶效果程式碼例項Canvas原型
- flex彈性佈局程式碼例項Flex
- JavaScript陣列合並程式碼例項JavaScript陣列