javascript - 如何在jquery中使用数据属性隐藏tr

Question

这是我隐藏表格行的jquery函数，在那里我放了数据属性到期

     $("tr.with-expiry").each(function() {
            var today = new Date();
            var tr_date = $(this).data('expiry');
            tr_date = new Date(today);
            if (today.getTime() > tr_date.getTime()) {
                $(this).hide();
            } else {
                $(this).show();
            }
        });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <table>
     <tr data-expiry="2020-09-15" class="with-expiry"><td>stuff 1</td></tr>
     <tr data-expiry="2020-09-15" class="with-expiry"><td>stuff 2</td></tr>
     <tr data-expiry="2020-08-01" class="with-expiry"><td>stuff 3</td></tr>
   </table>

标签： javascriptjquery

Answer 1

You're very close, you just are getting the Date() for your date-expiry incorrectly

tr_datetime = new Date(tr_date);

You were just overwriting it with today's date. The rest of the code then works as expected.

Date Comparison: To hide dates...

• ...Before today: if (today_datetime > tr_datetime.getTime())
• ...Up to today: if (today_datetime >= tr_datetime.getTime()) (i.e. including today)
• ...After today: if (today_datetime < tr_datetime.getTime())
• ...Today or later: if (today_datetime <= tr_datetime.getTime())

Adjust Today's Date by 1 Week:

• One week from today: today_datetime + (7 * 24 * 60 * 60 * 1000)
• One week ago: today_datetime - (7 * 24 * 60 * 60 * 1000)

Other Notes: FYI, you don't need to get today = new Date(); etc. every time - just get it once outside the loop.

Working Snippet:

var today = new Date();
var today_datetime = today.getTime();

$("tr.with-expiry").each(function() {
    tr_datetime = new Date($(this).data('expiry'));
    if (today_datetime > tr_datetime.getTime()) {
        $(this).hide();
    } else {
        $(this).show();
    }
});

var week_from_today = today_datetime + (7 * 24 * 60 * 60 * 1000);
$("tr.expiry-next-week").each(function() {
    tr_datetime = new Date($(this).data('expiry'));
    if (week_from_today > tr_datetime.getTime()) {
        $(this).hide();
    } else {
        $(this).show();
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p><strong>Show rows with dates after today</strong></p>
<table>
  <tr data-expiry="2020-09-01" class="with-expiry"><td>2020-09-01</td></tr>  
  <tr data-expiry="2020-09-09" class="with-expiry"><td>2020-09-09</td></tr>
  <tr data-expiry="2020-09-10" class="with-expiry"><td>2020-09-10</td></tr>
  <tr data-expiry="2020-09-16" class="with-expiry"><td>2020-09-16</td></tr>
  <tr data-expiry="2020-09-17" class="with-expiry"><td>2020-09-17</td></tr>
</table>
<p><strong>Show rows with dates later than 1 week from today</strong></p>
<table>
  <tr data-expiry="2020-09-01" class="expiry-next-week"><td>2020-09-01</td></tr>
  <tr data-expiry="2020-09-09" class="expiry-next-week"><td>2020-09-09</td></tr>
  <tr data-expiry="2020-09-10" class="expiry-next-week"><td>2020-09-10</td></tr>
  <tr data-expiry="2020-09-16" class="expiry-next-week"><td>2020-09-16</td></tr>
  <tr data-expiry="2020-09-17" class="expiry-next-week"><td>2020-09-17</td></tr>
</table>