基于时间比较隐藏/显示表格行

Question

我有一个表格，中间的日期列已经在Moment.js中解析/格式化。

我也有两个按钮，点击时，我想要一个按钮只显示日期为<的表格行，24小时后，另一个按钮用于显示日期> 24小时以外日期的表格行。

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

<button type="button" id="button1">Less than 24 hours</button> 
<button type="button" id="button2">More than 24 hours</button> 

<table id="myTable"> 
<thead> 
    <tr> 
     <th colspan="3">Table</th> 
    </tr> 
</thead> 
<tbody> 
    <tr> 
     <td>A</td> 
     <td class="dates">12/24/2016 12:45 pm</td> 
     <td>C</td> 
    </tr> 
    <tr style="display:none;"> 
     <td colspan="3"></td> 
    </tr> 
    <tr> 
     <td>A</td> 
     <td class="dates">11/23/2016 12:45 pm</td> 
     <td>C</td> 
    </tr> 
    <tr style="display:none;"> 
     <td colspan="3"></td> 
    </tr> 
    <tr> 
     <td>A</td> 
     <td class="dates">12/24/2016 12:45 pm</td> 
     <td>C</td> 
    </tr> 
    <tr style="display:none;"> 
     <td colspan="3"></td> 
    </tr> 
</tbody> 

我想我必须使用jquery，这就是我的想法。

$(document).ready(function() { 

    var m = moment(); 
    var n = m.add(24, 'hours'); 
    var $dates = $('.dates'); 

$('#button1').click(function() { 

    if ($dates.each > n) { 
     $dates.hide(); 

     }); 
    }); 
}); 

Answer 1

您可以使用瞬间isAfter检查表日期是>24小时远和isBetween检查表日期间当前日期和未来24小时（即我是如何解释<24小时远）

当解析表日期时刻的对象，你必须specify format，因为你的投入是不是在ISO 8601的格式。

这里工作的例子：

$('#button1').click(function(){ 
 
    var $dates = $('.dates'); 
 
    var m = moment().add(24, 'h'); 
 
    $dates.each(function() { 
 
    var date = moment($(this).text(), 'MM/DD/YYYY hh:mm a'); 
 
    if (date.isBetween(moment(), m)) { 
 
     $(this).parent().show(); 
 
    } else { 
 
     $(this).parent().hide(); 
 
    } 
 
    }); 
 
}); 
 

 
$('#button2').click(function(){ 
 
    var $dates = $('.dates'); 
 
    var m = moment().add(24, 'h'); 
 
    $dates.each(function() { 
 
    var date = moment($(this).text(), 'MM/DD/YYYY hh:mm a'); 
 
    if (date.isAfter(m)) { 
 
     $(this).parent().show(); 
 
    } else { 
 
     $(this).parent().hide(); 
 
    } 
 
    }); 
 
}); 
 

 
$('#button3').click(function(){ 
 
    $('tr').show(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.16.0/moment.min.js"></script> 
 

 
<button type="button" id="button1">Less than 24 hours</button> 
 
<button type="button" id="button2">More than 24 hours</button> 
 
<button type="button" id="button3">Show All</button> 
 

 
<table id="myTable"> 
 
<thead> 
 
    <tr> 
 
     <th colspan="3">Table</th> 
 
    </tr> 
 
</thead> 
 
<tbody> 
 
    <tr> 
 
     <td>A</td> 
 
     <td class="dates">12/24/2016 12:45 pm</td> 
 
     <td>C</td> 
 
    </tr> 
 
    <tr style="display:none;"> 
 
     <td colspan="3"></td> 
 
    </tr> 
 
    <tr> 
 
     <td>A</td> 
 
     <td class="dates">11/23/2016 12:45 pm</td> 
 
     <td>C</td> 
 
    </tr> 
 
    <tr style="display:none;"> 
 
     <td colspan="3"></td> 
 
    </tr> 
 
    <tr> 
 
     <td>A</td> 
 
     <td class="dates">12/24/2016 12:45 pm</td> 
 
     <td>C</td> 
 
    </tr> 
 
    <tr style="display:none;"> 
 
     <td colspan="3"></td> 
 
    </tr> 
 
</tbody>

Answer 2

尝试像这样（未经测试的代码段）。

$dates.each(function() { 
    var date = moment($(this).text()); 
    if (date.isAfter(n)) { 
    $(this).hide(); 
    } else { 
    $(this).show(); 
    } 
}); 

如果moment有在你的细胞解析您的日期时间文字的问题，你可以明确指定格式，see the documentation。

Answer 3

使用此fiddle。愿它帮助！

JS：

$('#less24,#gt24').click(function() { 
var target = $(this).attr('id'); 
var currentdate = new Date(); 
$('.dates').each(function(){ 

var diff=daydiff(currentdate,new Date($(this).text())); 
if(target === 'less24') 
{ 
if(diff <1 && diff >-1) 
{ 
$(this).parent().show(); 
} 
else 
{ 
$(this).parent().hide(); 
} 
} 
else 
{ 
if(diff <1 && diff >-1) 
{ 
$(this).parent().hide(); 
} 
else 
{ 
$(this).parent().show(); 
} 
} 
}); 

}); 

function parseDate(str) { 
    var mdy = str.split('/'); 
    return new Date(mdy[2], mdy[0]-1, mdy[1]); 
} 

function daydiff(first, second) { 
    return Math.round((second-first)/(1000*60*60*24)); 
} 

HTML：

<button type="button" id="less24">Less than 24 hours</button> 
<button type="button" id="gt24">More than 24 hours</button> 

<table id="myTable"> 
<thead> 
    <tr> 
     <th colspan="3">Table</th> 
    </tr> 
</thead> 
<tbody> 
    <tr> 
     <td>A</td> 
     <td class="dates">12/24/2016 12:45 pm</td> 
     <td>C</td> 
    </tr> 
    <tr style="display:none;"> 
     <td colspan="3"></td> 
    </tr> 
    <tr> 
     <td>A</td> 
     <td class="dates">11/23/2016 12:45 pm</td> 
     <td>C</td> 
    </tr> 
    <tr style="display:none;"> 
     <td colspan="3"></td> 
    </tr> 
    <tr> 
     <td>A</td> 
     <td class="dates">12/24/2016 12:45 pm</td> 
     <td>C</td> 
    </tr> 
    <tr style="display:none;"> 
     <td colspan="3"></td> 
    </tr> 
</tbody>