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

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 数据库的输出。如果我能以我们的本地时间格式（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 来检查日期是否仍在开始/结束时间之间。如果我使用两个相同的时间/日期和日期格式，例如。 “08/10/2016 10:05:00”，我只标记了一行。这是另一件烦人的事情。

谢谢！

Answer 1

检查这个sn-p：

$(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');
    }
  });

});

.highlight {
  color: red;
}

<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>

Answer 2

使用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')更改日期格式

Answer 3

你可以自己给<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');
  } 
});

请注意，如果您对日期对象 as seen here 执行 ==、!=、=== 和 !==，则只需使用 .getTime()。

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