javascript - 仅使用 javaScript 按具有日期值 desc 的列对 HTML 中的表进行排序

Question

是否可以仅使用 javaScript 来实现排序功能，而无需任何其他排序库？

假设我有一个表，它的第一列具有以下格式的日期值:MM/dd/yyyy。表格还有两列，如下所示:

<table id="results" width="360" border="1">
    <thead>
      <tr>
        <th scope="col" width="120">Date Created</th>
        <th scope="col" width="120">Name</th>
        <th scope="col" width="120">Tests</th>
      </tr>
      <tr>
        <td>07/08/2015</td>
        <td>Test Name</td>
        <td>Raven</td>
      </tr>
      <tr>
        <td>05/04/2015</td>
        <td>Test Name 4</td>
        <td>Raven 3</td>
      </tr>
      <tr/>
        <td>01/08/2017</td>
        <td>Test Name 2</td>
        <td>PCT</td>
      </tr>
    </thead>
</table>

是否可以假设添加一个按钮，然后在单击事件时按日期列中的值对行进行排序？

我必须只使用普通的 javaScript 和 HTML 来完成这个，所以不幸的是没有 jQuery :(

Answer 1

这里有一些我想给你一些想法的东西。显然，您可以扩展它以按其他数据类型排序。

我通过将字符串格式日期直接更改为 20140312 形式的八位数来“欺骗”日期比较。来自 "12/03/2014" - 请注意，我假设日期输入格式为 dd/mm/yyyy ，所以如果出于某种原因你实际上正在使用 mm/dd/yyyy你必须调整 convertDate()功能。

我还介绍了一个 <tbody>放入您的表格中，这样我就可以对数据行进行排序，而完全忽略标题行。

function convertDate(d) {
  var p = d.split("/");
  return +(p[2]+p[1]+p[0]);
}

function sortByDate() {
  var tbody = document.querySelector("#results tbody");
  // get trs as array for ease of use
  var rows = [].slice.call(tbody.querySelectorAll("tr"));
  
  rows.sort(function(a,b) {
    return convertDate(a.cells[0].innerHTML) - convertDate(b.cells[0].innerHTML);
  });
  
  rows.forEach(function(v) {
    tbody.appendChild(v); // note that .appendChild() *moves* elements
  });
}

document.querySelector("button").addEventListener("click", sortByDate);

<table id="results" width="360" border="1">
    <thead>
      <tr>
        <th scope="col" width="120">Date Created</th>
        <th scope="col" width="120">Name</th>
        <th scope="col" width="120">Tests</th>
      </tr>
    </thead>
    <tbody>
       <tr>
        <td>04/04/2015</td>
        <td>Test Name 2</td>
        <td>1</td>
      </tr>
      <tr>
        <td>09/08/2017</td>
        <td>Test Name 5</td>
        <td>2</td>
      </tr>
      <tr>
        <td>07/08/2015</td>
        <td>Test Name 4</td>
        <td>3</td>
      </tr>
      <tr>
        <td>05/04/2015</td>
        <td>Test Name 3</td>
        <td>4</td>
      </tr>
      <tr>
        <td>12/08/2017</td>
        <td>Test Name 6</td>
        <td>5</td>
      </tr>
      <tr>
        <td>21/03/2014</td>
        <td>Test Name 1</td>
        <td>6</td>
      </tr>
    </tbody>
</table>
<button>Sort by date</button>