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

这可能对您有所帮助

＆＃13;

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

＆＃13;

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

＆＃13;

隐藏基于日期的表行

2 个答案: