如何使用 javascript 对 html 中的表格 tbodies 进行排序？答案

【问题标题】：How to sort table tbodies in html with javascript?如何使用 javascript 对 html 中的表格 tbodies 进行排序？
【发布时间】：2017-01-10 17:37:17
【问题描述】：

我在工作场所遇到了这个问题，我觉得这张桌子对我来说并不常见。我想对这个表进行排序，就像我单击一个标题时一样，它是从该标题类别中排序的。例如，我有这个 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来做到这一点

【问题讨论】：

可以使用datatable等插件
你能解释一下排序逻辑吗？
@Burimi 就像当我点击其中一个thad 时，表格从那个th 排序，例如当我点击航空公司时，表格从航空公司升序排序。该表由多个 tbodies 组成，并且值在那里。这就像对来自不同 tbodies 的值进行排序并使用排序的 tbodies 重新创建表。
@MaximalSnowman 所以你想根据用户点击对单个 tbody 进行排序？如果是这种情况，排序时会考虑哪些值？按他们的日期，城市？
jquery 数据表最适合这个目的

标签： javascript html sorting

【解决方案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

【讨论】：

这会更容易var th=document.getElementById('AirflightDetail').getElementsByTagName('th'); 而不是querySelector 和querySelectorAll ...？在添加事件监听器部分
感谢您的帮助@Burimi，我仍在尝试弄清楚如何使用它。看来我需要做很多事情。