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

nemo_87

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

nnnnnn

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

我已经只是直接改变字符串格式日期到8位数字的形式为“骗”上的日期比较20140312"12/03/2014"-注意,我假定的日期输入格式dd/mm/yyyy,因此,如果由于某种原因,你实际上是使用mm/dd/yyyy您将不得不调整convertDate()功能。

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

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>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

使用javascript按具有高,中,低值的列对html表进行排序

使用jQuery按首个日期列对html表行进行排序

如何按日期对查询结果进行排序,然后按MySQL中的特定列值排序

使用javascript中的sortBy按值对哈希升序进行排序

按日期对列进行排序

按日期对列进行排序

按表中的多个列值排序

按日期列对数据表进行排序

按日期时间 DESC 排序

使用JavaScript按HTML表中的下拉菜单值进行过滤

按日期对PHP数组表进行排序

如何在Pandas数据框中按行值对日期时间列进行排序?

在 JavaScript 中按日期或布尔值对 JSON 对象数组进行排序

SQL:如何在按行排序查询时,按日期(DESC)对查询进行排序,同时使行的列指定值位于顶部?

在R中按日历顺序对日期列进行排序

在Javascript中按日期对未知数量的对象进行排序

如何在JavaScript中按日期对数组进行排序?

按日期值对JSON对象进行排序

使用php在5维值中按日期对5维数组进行排序?

按表值的升序对ggplot barplot中的标签进行排序

在Postgres中的联接表中按列对行进行排序

按日期排序数据表中的列

如何选择按日期列 desc 排序的不同记录 - Laravel

使用Excel VBA按列值对工作表数据进行排序

使用orderBy按日期对数据进行排序仅按天数而不是年份对数据进行排序。[AngularJS]

按月按日期列对 df 进行排序

SQL:按日期对列进行排序/分组

按日期对csv列进行排序

按字母顺序使用 JSON 数据对 HTML 表进行排序