根據日期隱藏表格行

Question

我有一個充滿事件的HTML表。 每個事件都有一個日期。 表格行如下所示：

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

基於當前日期，我想隱藏所有早於當前日期的行/事件。 我在想這可以通過在頁面加載時運行的jQuery函數來實現。 誰能告訴我我該怎么做？

Answer 1

我已將工作代碼放在Codepen上 。 希望對您有幫助！

(function() {
  var d = new Date();
  var month = d.getMonth() + 1;
  var day = d.getDate();
  var curDate = d.getFullYear() + '-' + (('' + month).length < 2 ? '0' : '') + month + '-' + (('' + day).length < 2 ? '0' : '') + day;

  var curRow = $('tr[data-date="' + curDate + '"]').index();
  var rows = $('tr[data-date]').length;

  for (curRow - 1; curRow <= rows; curRow++) {
    $('tr[data-date]:eq(' + curRow + ')').css('display', 'none');
  }
})();

Answer 2

這可能對您有幫助

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