I have a HTML table filled with events. Each event has a date. The table rows look like this:
<div class="table-responsive">
<table>
<thead>
<tr>
<th>Date</th>
<th>Event</th>
</tr>
</thead>
<tbody>
<tr data-date="2017-03-27">
<td>2017-03-27</td>
<td>My event detail</td>
</tr>
<tr data-date="2017-03-28">
<td>2017-03-28</td>
<td>My event detail 2</td>
</tr>
</tbody>
</table>
</div>
Based on the current date I want to hide all rows/events that are older than current date. I'm thinking this could be achieved using a jQuery function that runs when the page loads. Can anyone show me how I could do this?
This may help you
$(document).ready(function(e) {
$('.event_display_table tbody tr').each(function(index, element) {
event_day = $(this).attr('data-date');
event_day = new Date(event_day);
//today = new Date('2017-03-14');
today = new Date();
if(event_day.getTime() < today.getTime())
{
$(this).css('display','none');
}
console.log($(this).attr('data-date'));
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="table-responsive">
<table class="event_display_table" border="1" >
<thead>
<tr>
<th>Date</th>
<th>Event</th>
</tr>
</thead>
<tbody>
<tr data-date="2017-03-13">
<td>2017-03-13</td>
<td>My event detail 2</td>
</tr>
<tr data-date="2017-03-15">
<td>2017-03-15</td>
<td>My event detail 2</td>
</tr>
<tr data-date="2017-03-27">
<td>2017-03-27</td>
<td>My event detail</td>
</tr>
<tr data-date="2017-03-28">
<td>2017-03-28</td>
<td>My event detail 2</td>
</tr>
</tbody>
</table>
</div>Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments