JavaScript按表上的日期排序不起作用 [英] JavaScript Sort by Date on table not working
问题描述
嗨我无法在日期上获得排序功能。它改变了行的顺序,但是它没有正确排序,并且日期都在整个地方。
Hi I cannot get sort function working on date. It changes order of the rows but it doesn't sort properly and dates are all over the place.
我希望将来的事件发生在未来事件中。
I would like upcoming events to future events.
请参阅下面的代码。
$('tr.Entries').sort(function(a,b){
return new Date(jQuery(a).find('td.event-date > a').text()).getTime() <
new Date(jQuery(b).find('td.event-date > a').text()).getTime()
}).appendTo('tbody');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="event clearfix">
<thead>
<tr>
<td>Date</td>
<td>Event</td>
<td>Location</td>
<td>Ticket</td>
</tr>
<tr class="space"></tr>
</thead>
<tbody>
<tr class="Entries">
<td class="event-date">
<a href="#">25/08/2017</a>
</td>
<td class="event-title">
<a href="#">Live N Local Winter Music Festival</a>
</td>
<td class="event-location">
<a href="#">Pause Bar, Balaclava</a>
</td>
<td class="event-ticket-link">
<a href="#" class="button button-normal">BUY TICKET</a>
</td>
</tr>
<tr class="Entries">
<td class="event-date">
<a href="#">15/04/2017</a>
</td>
<td class="event-title">
<a href="#">Reggae, Seggae & Sega Night</a>
</td>
<td class="event-location">
<a href="#">Bar Open, Fitzroy Melbourne</a>
</td>
<td class="event-ticket-link">
<a href="#" class="button button-normal">BUY TICKET</a>
</td>
</tr>
<tr class="Entries">
<td class="event-date">
<a href="#">06/05/2016</a>
</td>
<td class="event-title">
<a href="#">The Sunraysia Multicultural Festival</a>
</td>
<td class="event-location">
<a href="#">Nowingi Place, Mildura Victoria</a>
</td>
<td class="event-ticket-link">
<a href="#" class="button button-normal">BUY TICKET</a>
</td>
</tr>
</tbody>
</table>
UPDATE
我似乎在数组中添加日期然后对它们进行排序 - 现在我只是将它们追回身体?谢谢
I have seemed to add dates into an array then sorted them - now I just too append them back to the body? Thanks
var dates = jQuery('tr.Entries').find('td.event-date > a').map(function() {
return jQuery(this).text();
}).get();
dates.sort(function(a,b){
var dateA = a;
dateA = dateA.replace(/(..)\/(..)\/(....)/, '$2-$1-$3');
var dateB = b;
dateB = dateB.replace(/(..)\/(..)\/(....)/, '$2-$1-$3');
return new Date(dateA).getTime() - new Date(dateB).getTime();
});
jQuery.each(dates, function (index, value) {
//how to append back to tbody?
console.log(value);
});
推荐答案
您的日期字符串格式不正确。您可以使用 string#replace()
将日期字符串从<$ c $更改为 MM-DD-YYYY
c> DD\MM\YYYY 然后转换到日期并进行比较。
Your date string is not in valid format. You can use string#replace()
to change the date string to MM-DD-YYYY
from DD\MM\YYYY
and then covert to date and do the comparison.
$('tr.Entries').sort(function(a,b){
var dateA = jQuery(a).find('td.event-date > a').text();
dateA = dateA.replace(/(..)\/(..)\/(....)/, '$2-$1-$3');
var dateB = jQuery(b).find('td.event-date > a').text();
dateB = dateB.replace(/(..)\/(..)\/(....)/, '$2-$1-$3');
return new Date(dateB).getTime() - new Date(dateA).getTime();;
}).appendTo('tbody');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="event clearfix">
<thead>
<tr>
<td>Date</td>
<td>Event</td>
<td>Location</td>
<td>Ticket</td>
</tr>
<tr class="space"></tr>
</thead>
<tbody>
<tr class="Entries">
<td class="event-date">
<a href="#">15/04/2017</a>
</td>
<td class="event-title">
<a href="#">Reggae, Seggae & Sega Night</a>
</td>
<td class="event-location">
<a href="#">Bar Open, Fitzroy Melbourne</a>
</td>
<td class="event-ticket-link">
<a href="#" class="button button-normal">BUY TICKET</a>
</td>
</tr>
<tr class="Entries">
<td class="event-date">
<a href="#">06/05/2016</a>
</td>
<td class="event-title">
<a href="#">The Sunraysia Multicultural Festival</a>
</td>
<td class="event-location">
<a href="#">Nowingi Place, Mildura Victoria</a>
</td>
<td class="event-ticket-link">
<a href="#" class="button button-normal">BUY TICKET</a>
</td>
</tr>
<tr class="Entries">
<td class="event-date">
<a href="#">25/08/2017</a>
</td>
<td class="event-title">
<a href="#">Live N Local Winter Music Festival</a>
</td>
<td class="event-location">
<a href="#">Pause Bar, Balaclava</a>
</td>
<td class="event-ticket-link">
<a href="#" class="button button-normal">BUY TICKET</a>
</td>
</tr>
</tbody>
</table>
var dates = ['25/08/2017', '09/09/2017', '15/09/2017', '16/09/2017', '28/09/2017', '10/12/2017', '10/02/2018', '16/12/2017'];
dates.sort(function(a,b){
var dateA = a;
dateA = dateA.replace(/(..)\/(..)\/(....)/, '$2-$1-$3');
var dateB = b;
dateB = dateB.replace(/(..)\/(..)\/(....)/, '$2-$1-$3');
return new Date(dateA).getTime() - new Date(dateB).getTime();
});
console.log(dates);
这篇关于JavaScript按表上的日期排序不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!