Hide table row after date in column

Question

I want to get rid of Wordpress and publish a nice static webpage through amazon S3 and Cloudfront. The only 'dynamic' part of the website I have now (using wordpress) is a list of Tour Dates. Past events are not shown.

I like this feature, but I think there must be a way to do this using html and jQuery. Unfortunately I know nothing about the latter so I was really hoping for someone here to help me find the solution.

How to hide a table row if date in td is older than today's date? << That one I could not get to work, especially because there are a lot of other functions included I do not need.

What I need is a table, with some rows, each row has one cell containing a date (In european date format DD-MM-YY). As soon as the date is in the past, I would like the row to be hidden.

<table>
<tr>
 <th>Date</th>
 <th>Other stuff</th>  
 <th>Some more stuff</th>
</tr>

<tr>
 <td>15-05-2015</td>
 <td>Bla Bla Bla</td>
 <td>Some more bla</td>    
</tr>

<tr>
 <td>11-07-2035</td>
 <td>Bla Bla Bla 2</td>
 <td>Some more bla 2</td>    
</tr>
</table>

So in this case the first row with content would be hidden since it is in the past and the second one would be visible since its in the far future. Hopefully there is some easy solution for this!

do you want to hide the row on the fly or document load time? — Mahedi Sabuj, May 28 '15 at 18:36
Its solved, see below! And this fiddle https://jsfiddle.net/pjf28tmc/ — Rob Veugelaers, May 28 '15 at 18:48

score 0 · Answer 1 · edited May 28 '15 at 18:25

its not difficult but it a long way, im trying to explain a part of that for you,

the first row is heading so we do not want to manipulate that, add a class to the rows that may be need to be hide like .datacheck

and then we are trying to so some cool stuff whit jquery we are going to check each row one after on and get the date column and convert that to comparable date format and then decide to show or hide,

here is whats in my mind

$('table tr.datacheck').each(function(){

    var now = new Date().getTime();
    var text_time = $(this).find('td').first().text();
    var time = text_time.split('-'); // separate day,month,year
    var day   = time[0];
    var month = time[1];
    var year  = time[2];

    var row_date = new Date();
    row_date.setFullYear(year, month, day);

    // now we have both time, now time and row time , we can compare

   if (now > row_date.getTime() ) { // if the row date is less that now date
       $(this).hide(); // hide the row here
   }

});

i wrote this code in untidy mode for easy to understanding. hope it helps

here is a short code

$('table tr.datacheck').each(function(){

    var now  = new Date().getTime();
    var text = $(this).find('td:first').text().split('-');

    var row_date = new Date();
    row_date.setFullYear(time[0], time[1], time[2]);

    // now we have both time, now time and row time , we can compare

   if (now > row_date.getTime() ) { // if the row date is less that now date
       $(this).hide(); // hide the row here
   }

});

The solution offered after this one already worked, but out of curiosity would like to know why yours is not working: https://jsfiddle.net/wojxcpem/4/ — Rob Veugelaers, May 28 '15 at 18:47

score 0 · Answer 2 · answered May 28 '15 at 18:22

First, you need to create function to compare dates:

    function compareDate(dateParam)
    {
        var CurrentDate = new Date();
        var arrDate = dateParam.split("-");
        var SelectedDate = new Date(
            arrDate [2],
            arrDate [1] - 1,
            arrDate [0]
        );

        if(CurrentDate > SelectedDate){
            return true; //<-- means current date is greater
        }
        else
        {
            return false; //<-- means current date is smaller or equal
        }
    }

Then, check for every TR except for header one:

$(function(){
    $('tr').not(':first').each(function(){ //<-- take all rows except header
     if(compareDate($(this).find('td:first').text().trim())) 
      { 
       $(this).hide();
      }
    });
});

Hide table row after date in column

2 Answers2

Linked