javascript - 排序 HTML 表格长日期

Question

我有下面列出日期和事件的代码笔。

如果您单击表格标题，排序功能会起作用。

我需要能够按照“从旧到新”的正确顺序对日期进行排序并反转。但是，如果我目前排序，它会先排序日期，然后是月份，然后是年份。这需要先对YYYY进行排序，然后是MM，然后是DD。

See codepen here

<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 代码以摆脱内联样式和事件处理程序。
函数 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>

自己尝试:改进代码以处理任何数据类型:日期、数字、字符串。