Скрыть строки таблицы на основе даты И нажмите кнопку, чтобы показать их снова - PullRequest
0 голосов
/ 14 мая 2018

С помощью этого форума я создал таблицу, которая скрывает группы строк на основе текущей даты.Что здорово.Сейчас я хочу совместить это с кнопкой переключения, которая показывает скрытые даты.Но с моим очень ограниченным знанием 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>

Ответы [ 2 ]

0 голосов
/ 14 мая 2018

Я бы изменил функцию обработки, добавив класс .in-past к каждому <tbody>, у которого есть даты в прошлом. Эти даты могут быть скрыты или показаны в зависимости от класса таблицы. Вот фрагмент кода:

$(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>
0 голосов
/ 14 мая 2018

Мне пришлось реструктурировать вашу таблицу 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>
...