如何使用javascript对html中的表格主体进行排序？

Question

我是从我的工作遇到了这个问题，我有点儿觉得这表是不常见的表给我。 我想这个排序表，当我点击标题之一，它得到了从头部类别排序等。 在例子中，我这样的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>

当我在示例航空公司中单击标题时，该表已从航空公司进行排序，如下所示：

 <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>

我已经看过很多用javascript对表格进行排序的方法，但是它只对tbody的元素进行了排序，或者我从未见过任何可以对tbody进行排序的JavaScript。 我该如何使用javascript而没有jquery

Answer 1

有参与这一个了一堆东西。

首先，您必须将事件侦听器附加到所有主题项目上，以便在单击它们时执行排序操作。

var airFlightTable = document.querySelector("#AirflightDetail");

var tableHeaders = airFlightTable.querySelectorAll("thead tr th");

tableHeaders.forEach(function(tableHeader){

  tableHeader.addEventListener("click", onTableHeaderClick);
});

单击发生时，您将通过收集所有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
    });
  }
}

还有一些工作要做，但是从这一点来看您应该没事。 这是带有此实现的JSBin

如何使用javascript对html中的表格主体进行排序？

问题描述

1 个解决方案

解决方案1
0 2017-01-10 09:37:17

如何使用javascript对html中的表格主体进行排序？

问题描述

1 个解决方案

解决方案1 0 2017-01-10 09:37:17

解决方案1
0 2017-01-10 09:37:17