根据日期隐藏表格行并单击按钮以再次显示它们答案

【问题标题】：Hide table rows based on date AND click a button to show them again根据日期隐藏表格行并单击按钮以再次显示它们
【发布时间】：2018-05-14 22:01:15
【问题描述】：

在这个论坛的帮助下，我创建了一个表格，它根据当前日期隐藏了多组行。这是伟大的。我现在希望将其与显示隐藏日期的切换按钮结合使用。但是由于我对 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>

【问题讨论】：

标签： javascript jquery html-table toggle hide

【解决方案1】：

我会更改处理函数，为每个具有过去日期的<tbody> 添加一个.in-past 类。然后可以根据表格的类别隐藏或显示这些日期。这是一个sn-p：

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

【讨论】：

很抱歉，我无法使用您的代码获得有效的 html 文档。当我按下“运行代码 sn-p”时，我看到它有效，但我仍然做错了什么。我可能看起来您的解决方案更适合我的目的。显示今天的日期至关重要。我想在 1 个日期显示一个包含 12 行（比赛）的运动时间表，并且可以选择在当前日期前一整周显示，默认情况下也不隐藏上周的分数。
通过为开发人员打开 Chrome 帮助来修复它。我错误地使用了样式标签。对不起。所以谢谢你帮我解决我的问题！使用此解决方案，我可以通过提前 8 天指定“数据日期”来显示今天的日期和 7 天前的可选游戏行。太棒了！
很高兴您的问题得到了解决。考虑accepting 最能帮助您解决此问题的答案。谢谢！

【解决方案2】：

我不得不重组你的 HTML 表格以使适当的 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>

【讨论】：

哇，这太酷了！它就像一个魅力，但这样给我带来了一个额外的问题：显示今天的日期对我来说至关重要。我想在 1 个日期显示一个包含 12 行（游戏）的运动时间表。使用我的第一个解决方案，我可以通过将 data-date="2018-05-13" 指定为前一天来“伪造”日期，甚至可以在当前日期之前显示整整一周而不隐藏上周的分数。当然，这不是您的优雅解决方案。但是使用您的解决方案，可以做到这样的事情吗？
非常感谢！你激励我潜入编码并尝试不同的变量。很不错
很高兴听到，如果它解决了您的问题，请记得点赞并标记为答案:)