如何在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>

Answer 1

您非常接近，您只是错误地获取了Date()到期的Date()

tr_datetime = new Date(tr_date);

你只是用今天的日期覆盖了它。 然后其余代码按预期工作。

日期比较：要隐藏日期...

• ...今天之前： if (today_datetime > tr_datetime.getTime())
• ...直到今天： if (today_datetime >= tr_datetime.getTime()) （即包括今天）
• ...今天之后： if (today_datetime < tr_datetime.getTime())
• ...今天或以后： if (today_datetime <= tr_datetime.getTime())

将今天的日期调整 1 周：

• 从今天起一周： today_datetime + (7 * 24 * 60 * 60 * 1000)
• 一周前： today_datetime - (7 * 24 * 60 * 60 * 1000)

其他注意事项：仅供参考，您不需要today = new Date(); 等每次 - 只需在循环外获取一次。

工作片段：

 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>

Answer 2

 // `a` and `b` are `Date` instances const isAfter = (a, b) => a.getTime() > b.getTime(); // Example - Is '2020-09-10' after today? const result = isAfter(new Date('2020-09-10'), new Date()); // Result console.log(result)

 // `a` and `b` are `Date` instances const isAfter = (a, b) => a.getTime() > b.getTime() const todayDate = new Date() const todayString = todayDate.toISOString().slice(0, 10) $("tr.with-expiry").each(function() { var tr_date_val = $(this).data('expiry') // if the row's data-expiry attribute is after today if (isAfter(new Date(tr_date_val), todayDate)) { $(this).css({background: 'red'}) console.log(`${tr_date_val} is after ${todayString} so hide`) //$(this).hide() } else { console.log(`${tr_date_val} is not after ${todayString} so show`) $(this).css({background: 'green'}) //$(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>2020-09-15</td> </tr> <tr data-expiry="2020-09-15" class="with-expiry"> <td>2020-09-15</td> </tr> <tr data-expiry="2020-08-01" class="with-expiry"> <td>2020-08-01</td> </tr> </table>

Answer 3

尝试

 $("tr.with-expiry").each(function() { var today = new Date(); var data_expiry = $(this).attr('data-expiry'); var tr_date = new Date(data_expiry); 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>