如何对嵌套 div 表格进行排序？

我正在寻找一种解决方案，以便能够根据一个 "列 "中的值对 div 表格进行排序。在下面的示例中，排序列的 div 类为 "text-fl"。

交互式排序，在这种排序中，数据最初是按照代码中的方式加载的，但如果用户选择按值排序，他们可以点击列标题。

由于我的数据不在列表中，因此我认为我无法使用我找到的基于 ul 和 li 架构的现有示例。

为什么表格使用 div 和 .less 构建？这是为了使它们具有超强的响应能力，并能在较小的屏幕上进行转换。不过，这其中的利弊需要单独讨论。

数据结构如下：

<div class="container" id="sort-table">；
    <div class="tb-row header">；
        <div class="wrapper series-year">；
            <div class="text-series">Series</div>；
            <div class="text-year">Year</div>；
        </div>；
        <div class="wrapper rd-layout-driver">；
            <div class="text-round">Round</div>；
            <div class="text-layout">Layout</div>；
            <div class="text-driver">Driver</div>；
        </div>；
        <div class="wrapper car-fl">；
            <div class="text-car">Car</div>；
            <div class="text-fl">Fastest lap</div>；
        </div>；
    </div>；
    <div class='tb-row'>；
        <div class='wrapper series-year'>；
            <div class='text-series' title='BTCC'>BTCC</div>；
            <div class='text-year'>2024</div>；
        </div>；
        <div class='wrapper rd-layout-driver'>；
            div class='text-round'>12</div>；
            <div class='text-layout'>Full</div>；
            <div class='text-driver'>Ashley Sutton</div>；
        </div>；
        <div class='wrapper car-fl'>；
            <div class='text-car' title='福特福克斯'>福特福克斯</div>；
            <div class='text-fl' title='FL'>1:15.753</div>；
        </div>；
    </div>；
    <div class='tb-row'>；
        <div class='wrapper series-year'>；
            <div class='text-series' title='BTCC'>BTCC</div>；
            <div class='text-year'>2024</div>；
        </div>；
        <div class='wrapper rd-layout-driver'>；
            <div class='text-round'>11</div>；
            <div class='text-layout'>Full</div>；
            <div class='text-driver'>Dan Cammish</div>；
        </div>；
        <div class='wrapper car-fl'>；
            <div class='text-car' title='福特福克斯'>福特福克斯</div>；
            <div class='text-fl' title='FL'>1:16.467</div>；
        </div>；
    </div>；
    <div class='tb-row'>；
        <div class='wrapper series-year'>；
            <div class='text-series' title='BTCC'>BTCC</div>；
            <div class='text-year'>2024</div>；
        </div>；
        <div class='wrapper rd-layout-driver'>；
            div class='text-round'>10</div>；
            <div class='text-layout'>Full</div>；
            <div class='text-driver'>Jake Hill</div>；
        </div>；
        <div class='wrapper car-fl'>；
            <div class='text-car' title='宝马 330'>BMW 330</div>；
            <div class='text-fl' title='FL'>1:16.246</div>；
        </div>；
    </div>；
</div>；

是否有简单的解决方案？

当然，我可以帮实现这个目标。以下是如何根据“最快圈速”列对 div 表格进行排序的解决方案：

document.addEventListener('DOMContentLoaded', () => {
  const sortTable = document.getElementById('sort-table');
  const headerRow = sortTable.querySelector('.header');
  let sortColumn = null;
  let sortAscending = true;

  headerRow.addEventListener('click', (event) => {
    const clickedColumn = event.target.closest('.wrapper');

    if (clickedColumn) {
      const columnIndex = Array.from(headerRow.children).indexOf(clickedColumn);
      if (sortColumn === columnIndex) {
        sortAscending = !sortAscending;
      } else {
        sortColumn = columnIndex;
        sortAscending = true;
      }

      sortRows();
    }
  });

  function sortRows() {
    const rows = Array.from(sortTable.querySelectorAll('.tb-row:not(.header)'));
    rows.sort((a, b) => {
      const aValue = a.children[sortColumn].querySelector('.text-fl').textContent.trim();
      const bValue = b.children[sortColumn].querySelector('.text-fl').textContent.trim();

      if (sortColumn === 3) { // Fastest lap column
        const aTime = parseFloat(aValue.replace(':', ''));
        const bTime = parseFloat(bValue.replace(':', ''));
        return sortAscending ? aTime - bTime : bTime - aTime;
      } else {
        return sortAscending
          ? aValue.localeCompare(bValue)
          : bValue.localeCompare(aValue);
      }
    });

    rows.forEach(row => sortTable.appendChild(row));
  }
});

代码解释：

1. 事件监听器： 代码首先为表头行 ( header 类) 添加了一个点击事件监听器。
2. 获取点击的列： 当用户点击表头中的某个元素时，代码会找到其父级 .wrapper 元素，该元素代表被点击的列。
3. 确定排序顺序： 代码会跟踪当前排序的列 ( sortColumn ) 和排序顺序 ( sortAscending )。如果点击了同一列，则排序顺序反转。
4. sortRows 函数： 该函数负责对表格行进行排序。
5. 它获取所有数据行 ( .tb-row:not(.header) ) 并将其转换为数组。
6. 使用 sort 方法对数组进行排序。比较函数根据 sortColumn 和 sortAscending 的值来比较两行的值。
7. 对于“最快圈速”列，代码将时间转换为数字以便进行比较。
8. 排序后，代码使用 appendChild 方法将排序后的行重新添加到表格中。

如何使用：

1. 将此 JavaScript 代码添加到的 HTML 页面中。最好将其放在 <script> 标签中，位于 </body> 结束标签之前。

现在，的 div 表格应该可以根据“最快圈速”列进行交互式排序。点击其他列标题也会对相应的列进行排序。