如何使用javascript对html表进行排序？
[英]How to sort html table with javascript?
问题描述
I have such table which is created by multiple php codes from multiple mysql tables. 
我有这样的表，它是由来自多个mysql表的多个php代码创建的。
I just want to sort it by date column (Second TD's) by javascript. 我只想按日期按JavaScript的日期列（第二个TD）进行排序。
UPDATED: I just need the table sorted automatically by date column on page load. 更新：我只需要表格在页面加载时按日期列自动排序。 I don't want to sort it again by clicking theads. 我不想通过点击广告对其进行排序。 AND this is not the only table in my page. 而且这不是我页面中的唯一表格。 So i need to tell to javascript which table i should sort. 所以我需要告诉javascript我应该对哪个表进行排序。
Anyone has any idea? 有人知道吗？
2 个解决方案
解决方案1
0 2017-05-27 12:27:49
If you don't have to consider server-side pagination of your data have a look at jquery tablesorter . 如果您不必考虑数据的服务器端分页，请查看jquery tablesorter 。 Demo right here . 演示在这里 。
解决方案2
0 2017-05-27 12:29:10
I have a pure js solution in my drawer cabinet... 我的抽屉柜中有一个纯js解决方案...
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style> table{ width: 500px; } th, td { text-align: center; min-width:200px; } td:nth-child(1), th:nth-child(1) { min-width: 100px; } thead { background-color: #000; color: #fff; } thead tr { display: block; position: relative; } tbody { display: block; overflow: auto; overflow-x:hidden; width: 100%; height: 100px; } tbody tr:nth-child(even) { background-color: #dddddd; } </style> <body> <table> <thead> <tr> <th>Nummer</th> <th>Deutsch</th> <th>Englisch</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>eins</td> <td>one</td> </tr> <tr> <td>2</td> <td>zwei</td> <td>two</td> </tr> <tr> <td>3</td> <td>drei</td> <td>three</td> </tr> <tr> <td>4</td> <td>vier</td> <td>four</td> </tr> <tr> <td>5</td> <td>fünf</td> <td>five</td> </tr> <tr> <td>6</td> <td>sechs</td> <td>six</td> </tr> <tr> <td>7</td> <td>sieben</td> <td>seven</td> </tr> <tr> <td>8</td> <td>acht</td> <td>eight</td> </tr> <tr> <td>9</td> <td>neun</td> <td>nine</td> </tr> </tbody> </table> <script> eval('var $=x($,_){return(_)?[].slice.call(zAll($)).forEach(_):z($)},$s=x(e,r,v){$(e,x(_){_.style[r]=v})},$o=x(e,v,f){$(e,x(_){_.addEventListener(v,f)})}'.replace(/x/g,"function").replace(/z/g,'document.querySelector')); function colSort(a, colIndex){ a.sort(sortFunction); function sortFunction(a, b) { if (a[colIndex] === b[colIndex]) { return 0; } else { return (a[colIndex] < b[colIndex]) ? -1 : 1; } } return a; } var tableContent = [],count = 0; $('tbody tr', function(_){ tableContent[count]=[]; var cols = _.querySelectorAll('td'); for (i=0;i<cols.length;i++){ tableContent[count][i]=cols[i].innerHTML; } count++; }); var sortCol=function(colToSort){ var temp = []; $('thead tr th', function(_){ temp.push(_.innerHTML); }) //var cSort = temp.indexOf(this.innerHTML); var newSort = colSort(tableContent,colToSort-1); count =0; $('tbody tr', function(_){ var cols = _.querySelectorAll('td'); for (i=0;i<cols.length;i++){ cols[i].innerHTML=newSort[count][i]; } count++; }); } sortCol(2); </script> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.