仅使用 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" - 请注意，我假设日期输入格式为 @ 987654323@，所以如果由于某种原因你实际上在使用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>