排序表在HTML中按列与日期值desc仅使用javaScript

Sort table in HTML by column with date values desc using only javaScript

本文关键字：desc javaScript 日期 HTML 排序      更新时间：2023-09-26

是否有可能仅使用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:(

我准备了一些东西给你一些想法。显然，您可以将其扩展为按其他数据类型排序。

我通过直接将字符串格式日期从"12/03/2014"更改为20140312形式的八位数字来"欺骗"日期比较-注意，我假设日期输入格式是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>

相关文章：