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

时间:2015-04-10 22:26:48

标签: javascript jquery html

我的每个行的开始日期和结束日期都有两个日期列 我想用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>

我尝试使用here发布的类似解决方案,但没有成功。  JSFiddle

3 个答案:

答案 0 :(得分:4)

看看这个网站。看起来这就是你想要做的事情。 http://www.kryogenix.org/code/browser/sorttable/

答案 1 :(得分:2)

将字符串传递给Date构造函数时,格式为month/date/year

因为您的日期格式为date-month-year。你可以用正则表达式重新格式化它。

$('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');

答案 2 :(得分: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/