排序 HTML 表格長日期

Question

我有下面的代碼筆，其中列出了日期和事件。

如果您單擊表格標題，排序功能將起作用。

我需要能夠以“從最舊到最新”的正確順序對日期進行排序並反轉。 但是，如果我當前排序，它會先排序日期，然后是月份，然后是年份。 這需要先排序 YYYY，然后是 MM，然后是 DD。

在此處查看代碼筆

<table id="paleBlueRows" class="paleBlueRows">
<thead><tr>
  <th onclick="sortTable(0)">Date</th>
  <th onclick="sortTable(0)">Source</th>
  <th onclick="sortTable(0)">Event</th>
  <th onclick="sortTable(0)">News</th>
</tr></thead>

<script>
function sortTable(n) {
  var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
  table = document.getElementById("paleBlueRows");
  switching = true;
  dir = "asc";
  while (switching) {
    switching = false;
    rows = table.getElementsByTagName("TR");
    for (i = 1; i < (rows.length - 1); i++) {
      shouldSwitch = false;
      x = rows[i].getElementsByTagName("TD")[n];
      y = rows[i + 1].getElementsByTagName("TD")[n];
      if (dir == "asc") {
        if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
          shouldSwitch= true;
          break;
        }
      } else if (dir == "desc") {
        if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
          shouldSwitch= true;
          break;
        }
      }
    }
    if (shouldSwitch) {
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
      switchcount ++;
    } else {
      if (switchcount == 0 && dir == "asc") {
        dir = "desc";
        switching = true;
      }
    }
  }
}
</script>

Answer 1

我稍微修改了您的 HTML 代碼以擺脫內聯樣式和事件處理程序。
function sortTable已被重寫以處理具有任意數量列的任何表。 嵌套function typed處理針對您的情況優化的字符串到日期轉換（如有必要）。

 function sortTable(e) { var th = e.target; if (th.nodeName.toLowerCase() !== 'th') return true; var n = 0; while (th.parentNode.cells[n] != th) ++n; var order = th.order || 1; th.order = -order; var t = this.querySelector('tbody'); t.innerHTML = Object.keys(t.rows) .filter(k => !isNaN(k)) .map(k => t.rows[k]) .sort((a, b) => order * (typed(a) > typed(b) ? 1 : -1)) .map(r => r.outerHTML) .join(''); function typed(tr) { var s = tr.cells[n].innerText; var d = Date.parse(s.replace(/^(\\d{1,2})st|th/, '$1')) return isNaN(d) ? s.toLowerCase() : d; } } document.querySelector('#paleBlueRows') .addEventListener('click', sortTable, false);

 table.paleBlueRows { font-family: Arial, Helvetica, sans-serif; border: 1px solid #fff; width: 90%; height: 200px; margin: 0 auto; text-align: center; border-collapse: collapse; } table.paleBlueRows td, table.paleBlueRows th { border: 1px solid #fff; padding: 3px 2px; width: 12%; } table.paleBlueRows tbody td { font-size: 13px; } table.paleBlueRows tr:nth-child(even) { background: #D0E4F5; } table.paleBlueRows thead { background: #0B6FA4; border-bottom: 5px solid #fff; } table.paleBlueRows thead th { font-size: 17px; font-weight: bold; color: #fff; text-align: center; border-left: 2px solid; } table.paleBlueRows thead th:first-child { border-left: none; } table.paleBlueRows tbody td:first-child { font-weight: bold; } table.paleBlueRows tfoot td { font-size: 14px; }

 <table id="paleBlueRows" class="paleBlueRows"> <thead> <tr> <th>Date</th> <th>Source</th> <th>Event</th> <th>News</th> </tr> </thead> <tbody> <tr> <td>27th October 2016</td> <td>WWE.COM</td> <td>WrestleMania</td> <td>Packages announced</td> </tr> <tr> <td>27th October 2016</td> <td>WWE.COM</td> <td>WrestleMania</td> <td>Tickets announced</td> </tr> <tr> <td>31st October 2016</td> <td>WWE.COM</td> <td>WrestleMania</td> <td>Packages On-Sale</td> </tr> <tr> <td>15th November 2016</td> <td>FACEBOOK</td> <td>RAW</td> <td>RAW Tickets On-Sale</td> </tr> <tr> <td>15th November 2016</td> <td>FACEBOOK</td> <td>SmackDown</td> <td>SmackDown Tickets On-Sale</td> </tr> <tr> <td>20th January 2017</td> <td>WWE.COM</td> <td>NXT</td> <td>NXT Tickets On-Sale</td> </tr> <tr> <td>20th January 2017</td> <td>WWE.COM</td> <td>Hall of Fame</td> <td>Hall of Fame Tickets on sale</td> </tr> <tr> <td>27th February 2017</td> <td>WWE.COM</td> <td>WrestleMania</td> <td>WrestleMania Packages Shipped</td> </tr> <tr> <td>16th October 2017</td> <td>WWE.COM</td> <td>WrestleMania</td> <td>Packages announced</td> </tr> <tr> <td>16th October 2017</td> <td>WWE.COM</td> <td>WrestleMania</td> <td>Tickets announced</td> </tr> <tr> <td>30th October 2017</td> <td>WWE.COM</td> <td>WrestleMania</td> <td>Packages On-Sale</td> </tr> <tr> <td>17th November 2017</td> <td>WWE.COM</td> <td>WrestleMania</td> <td>WrestleMania Tickets On-Sale</td> </tr> </tbody> </table>

自己嘗試：改進代碼以處理任何數據類型：日期、數字、字符串。