根据日期隐藏表行

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

这可能会

对你有所帮助

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

Answer 2

我已经将工作代码放在代码笔上。希望对您有所帮助！

(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');
  }
})();