logo标签列表

使用jQuery按第一个日期列对HTML表格行进行排序

javascriptjqueryhtml
3

我有一个表格，每一行都有两个日期列：开始日期和结束日期。我想用jQuery按照开始日期对表格行进行排序。

以下是表格HTML代码：

<table class="table-bordered">
  <thead>
    <tr class="Headers">
      <th>Number</th>
      <th>Date Start</a></th>
      <th>Date End</th>
    </tr>
  </thead>
  <tbody>
    <tr class="Entries" data-id="13">
      <td data-field-type="string">1234</td>
      <td data-field-type="date">01-04-2015</td>
      <td data-field-type="date">01-04-2015</td>
    </tr>
    <tr class="Entries" data-id="24">
      <td data-field-type="string">1352</td>
      <td data-field-type="date">04-10-2012</td>
      <td data-field-type="date">23-10-2015</td>
    </tr>
    <tr class="Entries" data-id="8">
      <td data-field-type="string">1124</td>
      <td data-field-type="date">13-05-2014</td>
      <td data-field-type="date">01-04-2015</td>
    </tr>
    <tr class="Entries" data-id="23">
      <td data-field-type="string">1652</td>
      <td data-field-type="date">07-11-2013</td>
      <td data-field-type="date">22-10-2015</td>
    </tr>
  </tbody>
</table>

我尝试了一个类似的解决方案，这个方案在这里发布，但没有成功。 JSFiddle

3个回答
4
不错的插件 :) 谢谢。 - stav
2
当你将字符串传递给Date构造函数时，其格式为月/日/年。
由于您的日期格式是日-月-年，因此可以使用正则表达式重新格式化它。
$('tr.Entries').sort(function (a, b) {
    return new Date($(a).find($("[data-field-type='date']")).html().replace(/(\d{2})-(\d{2})-(\d{2})/g,'$2/$1/$3')).getTime() < new Date($(b).find($("[data-field-type='date']")).html().replace(/(\d{2})-(\d{2})-(\d{2})/g,'$2/$1/$3')).getTime()
}).appendTo('tbody');
谢谢！你是对的，你对代码的更改很好。我接受了Vohuman的建议，因为我认为那段代码在处理更大的数据行时速度更快。 - stav
2
我建议：

我建议：

$('tr.Entries').each(function() {
     var t = this.cells[1].textContent.split('-');
     $(this).data('_ts', new Date(t[2], t[1]-1, t[0]).getTime());
}).sort(function (a, b) {
    return $(a).data('_ts') < $(b).data('_ts');
}).appendTo('tbody');

http://jsfiddle.net/rmva17gr/

非常感谢您的建议！我想问一下，是否可以使用jQuery按两个单元格对HTML表格行进行排序，例如按第一个单元格名称，然后按第二个单元格日期，类似于MYSQL中的ORDER BY name，date DESC，这样行将按名称和日期排序分组。 - stav
@stav 欢迎！JavaScript的工作方式与SQL不同，但sort方法本身足够灵活，可以实现你想要的功能。这里有一个演示：http://jsbin.com/nuvudaboto/1/edit?html,js,output。基本上它是按照第二个单元格排序，然后再按照第一个单元格排序。 - Ram
也许我应该将这个问题作为新问题发布，但我会在这里问一下。我倒转了你的代码，首先按第一个单元格排序，然后按第二个单元格排序，但我无法使其工作:(。这是我所做的演示http://jsbin.com/gabavonezi/1/edit，这是我需要的http://jsbin.com/dodawoqoqu/1/edit。 - stav
@stav，你应该删除+运算符。我之前使用+将操作数转换为数字。由于内容以字母开头，它会返回NaN（不是数字）的结果。 - Ram
是的，它对我起作用了，但我正在使用包含日期的输入字段上的日期选择器，在缩短日期选择器后它停止工作了，我重新初始化了它，但仍然不起作用... - Amit Kumar
除非我在返回字符串末尾添加 ? 1 : -1;，否则对我没有用。因此完整的返回字符串为：return $(a).data('_ts') < $(b).data('_ts') ? 1 : -1; - askepott
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接