仅使用javaScript按日期和日期值desc按列对HTML中的表进行排序 [英] Sort table in HTML by column with date values desc using only javaScript

问题描述

是否可以仅使用javaScript而不使用任何其他库来进行排序?

Is it possible to make sorting function using only javaScript, without any other library for sorting?

假设我有一个表，并且它的第一列的日期值采用以下格式:MM/dd/yyyy.表格又有两列，如下所示:

Let's say I have one table, and it's first column that has date values in this format: MM/dd/yyyy. Table has two more columns, like this:

<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>

是否可以说添加一个按钮，并在单击事件时按日期"列中的值对行进行排序?

Would it be possible to lets say add one button, and on click event sort rows by values in Date column?

我必须仅使用简单的javaScript和HTML来完成此操作，因此不幸的是没有jQuery:(

I have to accomplish this using only plain javaScript and HTML, so no jQuery unfortunately :(

推荐答案

以下是我想给您的一些想法.显然，您可以将其扩展为按其他数据类型排序.

Here's a little something I whipped up to give you some ideas. Obviously you could extend this to sort by other data types.

我只是通过直接将字符串格式的日期更改为从"12/03/2014"到20140312形式的八位数字来欺骗"日期比较-请注意，我假设日期输入格式为dd/mm/yyyy，因此如果出于某种原因您实际上正在使用mm/dd/yyyy，则必须调整convertDate()函数.

I've "cheated" on the date comparisons by just changing the string format date directly to an eight-digit number in the form 20140312 from "12/03/2014" - note that I've assumed the date input format is dd/mm/yyyy, so if for some reason you're actually using mm/dd/yyyy you'll have to tweak the convertDate() function.

我还向您的表中引入了<tbody>，以便我可以对数据行进行排序，而完全忽略标题行.

Also I've introduced a <tbody> into your table so that I can just sort the data rows and completely ignore the header row.

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>

这篇关于仅使用javaScript按日期和日期值desc按列对HTML中的表进行排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！