Question

我想摆脱Wordpress并通过亚马逊S3和Cloudfront发布一个漂亮的静态网页。唯一的动态＆＃39;我现在拥有的网站的一部分（使用wordpress）是一个旅游日期列表。过去的活动没有显示。

我喜欢这个功能，但我认为必须有一种方法可以使用html和jQuery来实现。不幸的是我对后者一无所知，所以我真的希望有人帮助我找到解决方案。

How to hide a table row if date in td is older than today's date?＆lt;＆lt;那个我无法开始工作，特别是因为我不需要包含很多其他功能。

我需要的是一个表，有一些行，每行有一个包含日期的单元格（欧洲日期格式为DD-MM-YY）。一旦日期过去，我希望该行被隐藏。

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

因此，在这种情况下，包含内容的第一行将被隐藏，因为它在过去，而第二行将在远期显示。希望有一些简单的解决方案！

Answer 1

不难，但还有很长的路要走我试图为你解释一部分，

第一行是标题，所以我们不想操纵它，将类添加到可能需要隐藏的行中，如.datacheck

然后我们尝试使用一些很酷的东西来jquery 我们将在打开后检查每一行并获取日期列并将其转换为可比较的日期格式，然后决定显示或隐藏，

这是我的想法

$('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
   }

});

我用不整齐的模式编写了这段代码，以便于理解。希望它有所帮助

这是一个简短的代码

$('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
   }

});

Answer 2

首先，您需要创建比较日期的函数：

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

然后，检查除标题1之外的每个TR：

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

在列中的日期之后隐藏表格行

2 个答案: