使用jQuery按第一个日期列对html表格行进行排序 [英] Sort html table rows by first date column with jQuery

问题描述

我在每行中有两个日期列的开始日期和结束日期
我想按jQuery的开始日期对表格行进行排序

下面是表格html代码：

 < table class =table-bordered> 
< thead> 
< tr class =Headers> 
< th> Number< / th> 
< th>日期开始< / a>< / th> 
< th>日期结束< / th> 
< / tr> 
< / thead> 
< tbody> 
< tr class =Entriesdata-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 =Entriesdata-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 =Entriesdata-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 =Entriesdata-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

解决方案

我会建议：

$ $ p $ $''tr.Entries'each（function（） {
var t = this.cells [1] .textContent.split（' - '）;
$（this）.data（'_ ts'，new Date（t [2]，t [1 （a，b）{
return $（a）.data（'_ ts'）< $（$，$）}。getTime（））;
} （b）.data（'_ ts'）;
}）。appendTo（'tbody'）;

http://jsfiddle.net/rmva17gr/

I have table with two date columns in each row start date and end date I want to sort table rows by start date with jQuery

Below is the table html code:

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

I made a try with similar solution posted here but without success. JSFiddle

解决方案

I'd suggest:

$('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表格行进行排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！