根据日期隐藏 table 行，然后单击按钮再次显示它们

Question

在这个论坛的帮助下，我创建了一个 table 来隐藏基于当前日期的行组。这很棒。我现在希望将它与显示隐藏日期的切换按钮结合起来。但是由于我对 Javascript 的了解非常有限，我无法完成它。有任何想法吗？这是我目前所拥有的：

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").slideToggle();
    });
});

$(document).ready(function(e) {
    $('.event_display_table tbody').each(function(index, element) {
        event_day = $(this).attr('data-date');
        event_day = new Date(event_day);
        today = new Date();
        if(event_day.getTime() < today.getTime())
        { 
           $(this).css('display','none');
        }

        console.log($(this).attr('data-date'));

    });
});

</script>
</head>

对于正文：

<body>

<p>This is a paragraph which can be hidden by clicking the button.</p>

<button>Toggle between slide up and slide down for a p element, but I want it to toggle 'show previous/hidden' dates</button>

<p>This table below shows only event dates in the future. Which is what I want. But I also want to have a toggle button option which does show the previous events. Is this possible?</p>

<div class="table-responsive">
          <table class="event_display_table"  border="1" >
            <thead>
              <tr>
                <th>Date</th>
                <th>Event</th>
              </tr>
            </thead>
<tbody data-date="2018-03-13">
               <tr>
                <td>2018-03-13</td>
                <td>My event detail 1</td>
              </tr>                  
               <tr>
                <td>2018-05-14</td>
                <td>My event detail 2</td>
              </tr>
</tbody>                  
<tbody data-date="2018-05-13">
                <tr>
                <td>2018-05-13</td>
                <td>My event detail 3</td>
              </tr>                  
</tbody>
<tbody data-date="2018-05-15">
                <tr>
                <td>2018-05-15</td>
                <td>My event detail 4</td>
              </tr>                  
              <tr>
                <td>2018-06-27</td>
                <td>My event detail 5</td>
              </tr>
</tbody>
<tbody data-date="2018-06-15">
              <tr>
                <td>2018-06-15</td>
                <td>My event detail 6</td>
              </tr>                  
            </tbody>
          </table>
        </div>

Answer 1

我不得不重组你的 HTML table 以使适当的 js 工作：

$(document).ready(function(){
    $("button").click(function(){
        $("p").slideToggle();
        $('.hidden').toggle()
    });
});

$(document).ready(function(e) {
    $('.event_display_table tbody tr td:first-child').each(function(index, element) {
        var event_day = $(this).text();
        event_day = new Date(event_day);

        // I added this which will set the time of "event_day" to 00:00:00
        event_day.setHours(0,0,0,0)

        var today = new Date();

        // I added this which will set the time of "today" to 00:00:00 
        today.setHours(0,0,0,0)

        if(event_day < today) {
           $(this).parent().hide()
           $(this).parent().addClass('hidden');
        }
    });
});

已编辑 HTML：

  <table class="event_display_table"  border="1" >
    <thead>
      <tr>
        <th>Date</th>
        <th>Event</th>
      </tr>
    </thead>
    <tbody>
       <tr>
        <td>2018-03-13</td>
        <td>My event detail 1</td>
      </tr>                  
       <tr>
        <td>2018-05-14</td>
        <td>My event detail 2</td>
      </tr>


        <tr>
        <td>2018-05-13</td>
        <td>My event detail 3</td>
      </tr>                  


        <tr>
        <td>2018-05-15</td>
        <td>My event detail 4</td>
      </tr>                  
      <tr>
        <td>2018-06-27</td>
        <td>My event detail 5</td>
      </tr>

      <tr>
        <td>2018-06-15</td>
        <td>My event detail 6</td>
      </tr>                  
    </tbody>
  </table>

Answer 2

我会更改处理函数以向每个具有过去日期的 <tbody> 添加 .in-past class。然后可以根据 table 的 class 隐藏或显示这些日期。这是一个片段：

$(document).ready(function() {
  $("button").click(function() {
    $('.event_display_table').toggleClass('future-only');
  });
});

$(document).ready(function(e) {
  $('.event_display_table tbody').each(function(index, element) {
    var event_day = $(this).data('date');
    event_day = new Date(event_day);
    today = new Date();
    if (event_day.getTime() < today.getTime()) {
      $(this).addClass('in-past');
    }
  });
});

.event_display_table.future-only .in-past {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>This is a paragraph which can be hidden by clicking the button.</p>

<button>Toggle between slide up and slide down for a p element, but I want it to toggle 'show previous/hidden' dates</button>

<p>This table below shows only event dates in the future. Which is what I want. But I also want to have a toggle button option which does show the previous events. Is this possible?</p>

<div class="table-responsive">
  <table class="event_display_table future-only" border="1">
    <thead>
      <tr>
        <th>Date</th>
        <th>Event</th>
      </tr>
    </thead>
    <tbody data-date="2018-03-13">
      <tr>
        <td>2018-03-13</td>
        <td>My event detail 1</td>
      </tr>
      <tr>
        <td>2018-05-14</td>
        <td>My event detail 2</td>
      </tr>
    </tbody>
    <tbody data-date="2018-05-13">
      <tr>
        <td>2018-05-13</td>
        <td>My event detail 3</td>
      </tr>
    </tbody>
    <tbody data-date="2118-05-15">
      <tr>
        <td>2018-05-15</td>
        <td>My event detail 4</td>
      </tr>
      <tr>
        <td>2118-06-27</td>
        <td>My event detail 5</td>
      </tr>
    </tbody>
    <tbody data-date="2018-06-15">
      <tr>
        <td>2018-06-15</td>
        <td>My event detail 6</td>
      </tr>
    </tbody>
  </table>
</div>

根据日期隐藏 table 行，然后单击按钮再次显示它们

Hide table rows based on date AND click a button to show them again

javascript

jquery

html-table

toggle

hide