Question

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

我也有两个按钮，点击时我想要一个按钮只显示日期＆lt; 24小时之后，另一个按钮显示表格行，日期为＆gt; 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

尝试类似这样的内容（未经测试的代码段）。

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

如果moment在您的单元格中解析日期时间文本时出现问题，则可以明确指定格式see the documentation。

Answer 2

使用此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>

Answer 3

您可以使用片刻isAfter检查表格日期是否为＆gt; 24小时之后和isBetween检查表格日期是否在当前日期和接下来的24小时之间（这就是我解释＆lt; 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>

根据时间比较隐藏/显示表格行

3 个答案: