Question

我想在一个特定的时间范围内突出显示一行。所以实际上让我们说它的10:00:00我需要标记该行，如果时间是在开始结束结束日期之间。

表：

<table class="table table-striped" id="timeTable">
  <thead>
    <th>Title</th>
    <th>Start</th>
    <th>End</th>
    <th>Channel</th>
  </thead>
  <tbody>
    <tr>
      <td>Title 1</td>
      <td class="dateRowStart">2016-08-10 09:00:00+02</td>
      <td class="dateRowEnd">2016-08-10 11:00:00+02</td>
      <td>Channel 1</td>
    </tr>
    <tr>
      <td>Title 2</td>
      <td class="dateRowStart">2016-08-10 09:30:00+02</td>
      <td class="dateRowEnd">2016-08-10 12:00:00+02</td>
      <td>Channel 3</td>
    </tr>
    <tr>
      <td>Title 4</td>
      <td class="dateRowStart">2016-08-10 13:00:00+02</td>
      <td class="dateRowEnd">2016-08-10 15:00:00+02</td>
      <td>Channel 4</td>
    </tr>
  </tbody>
</table>

dateformat是我的postgresql db的输出。如果我能用我们当地的时间格式（10.08.2016 - 14:15:12）展示它们会很棒，但这不是我的主要问题。

我的（只有一半完整的）js代码突出显示：

<script>
$('#timeTable .dateRowStart').each(function () {
  var dtTd = new Date($(this).html());
  var dtNew = new Date();
  if (dtNew.getTime() < dtTd.getTime()) {
    $(this).parent('tr').addClass('highlight');
  } 
});

</script>

如果日期仍在开始/结束时间之间，我不知道如何包含dateRowEnd来检查。如果我使用dateformat两个相同的时间/日期，例如。 “08/10/2016 10:05:00”，我只会标记一行。这是另一个烦人的事情。

谢谢！

Answer 1

您可以在<tr>标签中添加一个类，然后执行：

HTML：

<tbody>
  <tr class="dateRow">
    <td>Title 1</td>
    <td class="dateRowStart">2016-08-10 09:00:00+02</td>
    <td class="dateRowEnd">2016-08-10 11:00:00+02</td>
    <td>Channel 1</td>
  </tr>
  ...
</tbody>

jQuery的：

$('#timeTable').find('.dateRow').each(function () {
  var dtStart = new Date($(this).find(".dateRowStart").text());
  var dtEnd = new Date($(this).find(".dateRowEnd").text());
  var dtNew = new Date();
  if (dtNew >= dtStart && dtNew <= dtEnd) {
    $(this).addClass('highlight');
  } 
});

请注意，如果您在Date对象上.getTime()，==，!=和===，则只需使用!== {{} 3}}

编辑：正如@MarkSchultheiss建议的那样，将$('#timeTable .dateRow')分隔为$('#timeTable').find('.dateRow')会略微提高效率。

Answer 2

检查此代码段：

＆＃13;

$(function() {
  $('#timeTable .dateRowStart').each(function() {
    var dtTdStart = new Date($(this).text());
    var dtTdEnd = new Date($($(this).siblings('.dateRowEnd')).text());


    var dtNew = new Date();


    if (dtNew > dtTdStart && dtNew < dtTdEnd) {
      $(this).parent('tr').addClass('highlight');
    }
    else{
      $(this).parent('tr').removeClass('highlight');
    }
  });

});

＆＃13;

.highlight {
  color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-striped" id="timeTable">
  <thead>
    <th>Title</th>
    <th>Start</th>
    <th>End</th>
    <th>Channel</th>
  </thead>
  <tbody>
    <tr>
      <td>Title 1</td>
      <td class="dateRowStart">2016-08-11 17:00:00+02</td>
      <td class="dateRowEnd">2016-08-11 19:00:00+02</td>
      <td>Channel 1</td>
    </tr>
    <tr class="highlight">
      <td>Title 2</td>
      <td class="dateRowStart">2016-08-11 17:30:00+02</td>
      <td class="dateRowEnd">2016-08-11 18:00:00+02</td>
      <td>Channel 3</td>
    </tr>
    <tr>
      <td>Title 4</td>
      <td class="dateRowStart">2016-08-11 13:00:00+02</td>
      <td class="dateRowEnd">2016-08-11 15:00:00+02</td>
      <td>Channel 4</td>
    </tr>
  </tbody>

＆＃13;

Answer 3

使用moment.js即可 -

$('#timeTable .dateRow').each(function () {
  var startTime = $(this).closest("tr").find(".dateRowStart") .text();
  var endTime = $(this).closest("tr").find(".dateRowEnd").text();
  if (moment().isBetween(startTime, endTime)) {
      $(this).addClass('highlight'); 
  } 
});

codepen - http://codepen.io/anon/pen/OXAEAv

您还可以使用moment('orig date').format('MM/DD/YY HH:mm:ss')

更改日期格式

jQuery在特定时间内突出显示行

3 个答案: