如何使用javascript对html中的表格主体进行排序？
[英]How to sort table tbodies in html with javascript?
问题描述
I'm encountered this problem from my workplace and i kinda feel this table isn't common table for me. 
我是从我的工作遇到了这个问题，我有点儿觉得这表是不常见的表给我。 I want to sort this table like when i click one of the header, it got sorted from that header category. 我想这个排序表，当我点击标题之一，它得到了从头部类别排序等。 In example i have this html code: 在例子中，我这样的html代码：
<html> <head> </head> <body> <table id="AirflightDetail"> <thead> <tr> <th class="col-lg-2 text-center">Airline</th> <th class="col-lg-2 text-center">Depart</th> <th class="col-lg-2 text-center">Arrival</th> <th class="col-lg-2 text-center">Duration</th> <th class="col-lg-2 text-center">Price</th> </tr> </thead> <tbody class="table-result-list"> <tr> <td class="text-center" min-width="87px"> <span>Airline X</span> <br> <p>AX-006</p> </td> <td class="text-center" min-width="100px"> <strong>13:10</strong> <br> <span>Singapore</span> </td> <td class="text-center" min-width="100px"> <strong>14:25</strong> <br> <span>Bangkok</span> </td> <td class="text-center" min-width="65px"> <strong>1hour 15m</strong> <br> <span>Direct</span> </td> <td class="text-right amount" min-width="77px"> <strong>$327</strong> </td> </tr> </tbody> <tbody class="table-result-list"> <tr> <td class="text-center" min-width="87px"> <span>Airline H</span> <br> <p>AH-999</p> </td> <td class="text-center" min-width="100px"> <strong>18:30</strong> <br> <span>Singapore</span> </td> <td class="text-center" min-width="100px"> <strong>19:45</strong> <br> <span>Bangkok</span> </td> <td class="text-center" min-width="65px"> <strong>1hour 15m</strong> <br> <span>Direct </span> </td> <td class="text-right amount" min-width="77px"> <strong>$273</strong> </td> </tr> </tbody> <tbody class="table-result-list"> <tr> <td class="text-center" min-width="87px"> <span>Airline K</span> <br> <p>AK-100</p> </td> <td class="text-center" min-width="100px"> <strong>12:05</strong> <br> <span>Singapore</span> </td> <td class="text-center" min-width="100px"> <strong>14:20</strong> <br> <span>Bangkok</span> </td> <td class="text-center" min-width="65px"> <strong>2hour</strong> <br> <span>Direct </span> </td> <td class="text-right amount" min-width="77px"> <strong>$273</strong> </td> </tr> </tbody> </table> </body> </html>
When i click the header title in example Airline, the table got sorted from the airline like: 当我在示例航空公司中单击标题时，该表已从航空公司进行排序，如下所示：
<html> <head> </head> <body> <table id="AirflightDetail"> <thead> <tr> <th class="col-lg-2 text-center">Airline</th> <th class="col-lg-2 text-center">Depart</th> <th class="col-lg-2 text-center">Arrival</th> <th class="col-lg-2 text-center">Duration</th> <th class="col-lg-2 text-center">Price</th> </tr> </thead> <tbody class="table-result-list"> <tr> <td class="text-center" min-width="87px"> <span>Airline H</span> <br> <p>AH-999</p> </td> <td class="text-center" min-width="100px"> <strong>18:30</strong> <br> <span>Singapore</span> </td> <td class="text-center" min-width="100px"> <strong>19:45</strong> <br> <span>Bangkok</span> </td> <td class="text-center" min-width="65px"> <strong>1hour 15m</strong> <br> <span>Direct </span> </td> <td class="text-right amount" min-width="77px"> <strong>$273</strong> </td> </tr> </tbody> <tbody class="table-result-list"> <tr> <td class="text-center" min-width="87px"> <span>Airline K</span> <br> <p>AK-100</p> </td> <td class="text-center" min-width="100px"> <strong>12:05</strong> <br> <span>Singapore</span> </td> <td class="text-center" min-width="100px"> <strong>14:20</strong> <br> <span>Bangkok</span> </td> <td class="text-center" min-width="65px"> <strong>2hour</strong> <br> <span>Direct </span> </td> <td class="text-right amount" min-width="77px"> <strong>$273</strong> </td> </tr> </tbody> <tbody class="table-result-list"> <tr> <td class="text-center" min-width="87px"> <span>Airline X</span> <br> <p>AX-006</p> </td> <td class="text-center" min-width="100px"> <strong>13:10</strong> <br> <span>Singapore</span> </td> <td class="text-center" min-width="100px"> <strong>14:25</strong> <br> <span>Bangkok</span> </td> <td class="text-center" min-width="65px"> <strong>1hour 15m</strong> <br> <span>Direct</span> </td> <td class="text-right amount" min-width="77px"> <strong>$327</strong> </td> </tr> </tbody> </table> </body> </html>
I've already seen many javascript sort the table but it only sort the element of tbody or but i never seen any javascript that can sorting the tbody. 我已经看过很多用javascript对表格进行排序的方法，但是它只对tbody的元素进行了排序，或者我从未见过任何可以对tbody进行排序的JavaScript。 How can i do that with javascript and without jquery 我该如何使用javascript而没有jquery
1 个解决方案
解决方案1
0 2017-01-10 09:37:17
There is a bunch of stuff involved on this one. 有参与这一个了一堆东西。
First of all you have to attach event listeners to all your thead th items so when they are clicked they'll perform the sort action. 首先，您必须将事件侦听器附加到所有主题项目上，以便在单击它们时执行排序操作。
var airFlightTable = document.querySelector("#AirflightDetail");
var tableHeaders = airFlightTable.querySelectorAll("thead tr th");
tableHeaders.forEach(function(tableHeader){
tableHeader.addEventListener("click", onTableHeaderClick);
});
When click happens you start the sort process by gathering all tbody tags and manipulate their DOM. 单击发生时，您将通过收集所有tbody标签并操纵其DOM来开始排序过程。
function onTableHeaderClick(event){
var sortBy = event.currentTarget.innerHTML;
if(sortBy === 'Airline'){
airFlightTable.querySelectorAll(".table-result-list").forEach(function(tableResultsLIst){
var items = [].slice.call(tableResultsLIst.querySelectorAll("td"));
var sortedItems = items.sort(); //you can place your sort logic here and after you're done you have to replace items of current tbody with sorted ones
});
}
}
There is some work left for you, but you should be fine from this point. 还有一些工作要做，但是从这一点来看您应该没事。 Here is a JSBin with this implementation 这是带有此实现的JSBin
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.