基於時間比較隱藏/顯示錶格行

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>